1、安装better-scroll
npm install--save better-scroll
2、在组价中引用
import BScroll from 'better-scroll'
3、创建滚动
new BScroll(Dom元素)
这里的Dom元素可以传一个类选择器,比如:
new BScroll('.shop-info',{
click:true,//启用点击,因为better-scroll会默认禁用掉元素的点击事件
})
注意:Vue中数据更新是异步的,在数据还没有加载完之前,BScroll是无法获取目标内容容器的高度的,就会出现无法滚动的现象。
这里可以用$nextTick()解决。
this.$store.dispatch('getShopRatings',()=>{
this.$nextTick(()=>{
new BScroll('.shop-info',{
click:true
})
})
})
4、设置横向滚动
滚动默认是纵向滚动的,实现横向滚动就要设置scrollX属性,如下:
new BScroll('.shop-info',{
click:true,//启用点击,因为better-scroll会默认禁用掉元素的点击事件
scrollX:true //横向滑动
})