vue中使用better-scroll实现页面滑动

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 //横向滑动
})

 

注意：实现滚动的条件

内层div高度一定大于外层div的宽或高，才能滚动