實作區域滾動的兩種方法
- 效果展示
- CSS方法
- BScroll方法
- 踩坑
效果展示
CSS方法
<ul class="content">
<li>分類串列1</li>
<li>分類串列2</li>
<li>分類串列3</li>
...
<li>分類串列100</li>
</ul>
//css
.content{
height: 150px;
background-color: #ff8198;
overflow-y: scroll;
}
BScroll方法
<template>
<div class="wrapper">
<ul class="content">
<li>分類串列1</li>
<li>分類串列2</li>
...
<li>分類串列100</li>
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: "Category",
data(){
return {
scroll:null
}
},
//組件創建完后呼叫
created() {
//new BScroll('.wrapper')
},
mounted() {
//console.log(document.querySelector('.wrapper'));
this.scroll = new BScroll(document.querySelector('.wrapper'))
}
}
</script>
<style scoped>
.wrapper{
height: 150px;
background-color: #ff8198;
overflow: hidden;
}
</style>
踩坑
1.注意不要在created()方法中里面用BScroll，因為此方法是在組件創建時呼叫，如果把BScroll寫里面會獲取不到元素，
2.上面的代碼中 BetterScroll 是作用在外層 wrapper 容器上的，滾動的部分是 content 元素，這里要注意的是，BetterScroll 默認處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略，所以，這里我們要滾動的是ul里面的li，但是ul不能作為父元素，否則只有一個li是滾動的，不是我們要的效果，所以要在ul外面包一個div，
3.切記，觸摸滾動，而不是滑鼠滾動，不要像我一樣傻傻的用滑鼠滾動，然后就看不到區域滾動的效果，還以為是哪里用的不對，解釋：因為這個框架主要用于移動端，而我們移動端哪里來的滑鼠，不就是觸摸嘛，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249913.html
標籤：其他