安装:npm install better-scroll -S
组件中使用:
import BetterScroll from 'better-scroll'
注意:必须在mounted函数里面使用,不能在created里面使用,在created里面的时候,有数据但是没有节点,所以无法访问到节点,(在vue的生命周期中,到了mounted阶段才有真实的DOM)
mounted() {
new BetterScroll('.wrappers',{
movable:true,
zoom:true
})
},
注意:使用的时候,wrappers充当容器,里面的div内容才是可以被滚动的, 当 content的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动了,这就是 better-scroll 的滚动原理。 所以要给外面wrapper容器添加固定的高度才能显示滚动
<section class="wrappers" >
<div>
<Recommend />
</div>
</section>
样式:
.wrappers{
height:200px;
}