效果展示
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.切记,触摸滚动,而不是鼠标滚动,不要像我一样傻傻的用鼠标滚动,然后就看不到局部滚动的效果,还以为是哪里用的不对。解释:因为这个框架主要用于移动端,而我们移动端哪里来的鼠标,不就是触摸嘛。