移动端网页--better-scroll容易采坑合集

移动端网页--better-scroll容易采坑合集

一、better-scroll源码bug,浏览器需要刷新一次才能正常滑动

在new BScroll时，在options中加入

mouseWheel: true,//开启鼠标滚轮
disableMouse: false,//启用鼠标拖动
disableTouch: false//启用手指触摸

原文链接：https://www.cnblogs.com/mldonkey/p/11421577.html

二、refresh解决better-scroll图片加载导致滚动条计算错误

1. 给better-scroll组件添加refresh方法

   //BScroll.vue
   refresh(){
       this.bscroll && this.bscroll.refresh()  //bscroll为better-scroll实例对象
   }
   

2. 在给每张图片添加事件，监听图片是否加载完成，加载完成后使用事件总线发射一个事件imgLoaded

   //图片组件
   created(){  //也可使用@load事件监听
       this.$bus.emit("imgItemChanged")
   }
   unmounted(){
       this.$bus.emit("imgItemChanged")
   }
   

3. 接收事件，调用refresh方法时需判断better-scroll已经实例化

   //主组件
   mounted(){
       this.scrollRefresh() 
   }
   
   methods : {
       scrollRefresh(){
           if(this.$refs.bscroll){  //若better-scroll已经实例化
               this.$refs.bscroll.refresh()
           }
       }
   }
   

三、在better-scroll中的translate移动会影响position:fixed

若果在better-scroll中需要使用position:fixed，可将其设置在better-scroll外面