vue中使用better-scroll遇到的问题

安装及引入

npm i better-scroll
import BScroll from 'better-scroll'

初始化

// 

//   

//     
...
//     
...
//     ...
//   
//   
// 
// wrapper是ul标签的父标签类名
let scroll = new BScroll('.wrapper')

如果初始化代码在computed中使用，特别需要注意2点：

//1.避免重复初始化
if(!this.scroll){
  this.scroll=new BScroll('.list-content',{
    click:true
  })
}
// 如果涉及到数据所在的标签隐藏或显示 调用下面else 否则忽略
else{
//作用：重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
  this.scroll.refresh()
}
// 2.在界面加载完后实例化 需要用$nextTick()
this.$nextTick(()=>{
  if(!this.scroll){
    this.scroll=new BScroll('.list-content',{
      click:true
    })
  }else{
    this.scroll.refresh()
  }
})

better-scroll滑动插件常用的方法有scrollToElement，on，scrollTo等等

// 向上滑动300px,用时0.3s
this.scroll.scrollTo(0,-300,300)
// 绑定滑动事件，把滑动的距离保存到scrollY变量中
this.scroll.on("scroll", ({x, y}) => {
  this.scrollY = Math.abs(y);
});
// 滑动到元素li的位置，用时0.3s
this.scroll.scrollToElement(li,300)

better-scroll插件使用参考地址http://ustbhuangyi.github.io/better-scroll/doc/api.html