当前位置: 代码迷 >> 综合 >> vue中使用better-scroll实现页面滑动
  详细解决方案

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

热度:54   发布时间:2023-10-27 15:28:32.0

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的宽或高,才能滚动