better-scroll插件使用

Vue中的better-scroll插件

在需要的文件中添加
import BScorll from 'better-scroll';
引用的示例代码:
let scroll = new BScroll(Dom对象, {//options
  startX: 0,
  startY: 0
})

Vue获得Dom对象方法,
//定义对象
this.$els.foodWrapper//获取对象

(Vue 更新数据时是异步的,所以在数据未加载完全之前,Bscroll无法获取目标内容的高度,所以会导致无法滚动的现象)

为了解决上面的问题,运用Vue的nextTick();
(简单说，因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行，要保证在DOM更新以后再执行某一块代码，就必须把这块代码放到下一次事件循环里面，比如setTimeout(fn, 0)，这样DOM更新后，就会立即执行这块代码。)

// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

问题: 
PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,

方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,

selectMenu(index,event){
    if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
        return;
    }
}

参数说明：

• startX: 0 开始的X轴位置
• startY: 0 开始的Y轴位置
• scrollY: true 滚动方向
• click: true 是否启用click事件
• directionLockThreshold: 5
• momentum: true 是否开启动量动画，关闭可以提升效率
• bounce: true 是否启用弹力动画效果，关掉可以加速
• selectedIndex: 0
• rotate: 25
• wheel: false 是否监听鼠标滚轮事件
• snap: false 自动分割容器，用于制作走马灯效果等
• snapLoop: false
• snapThreshold: 0.1
• swipeTime: 2500
• bounceTime: 700 弹力动画持续的毫秒数
• adjustTime: 400
• swipeBounceTime: 1200
• deceleration: 0.001 滚动动量减速越大越快，建议不大于0.01
• momentumLimitTime: 300
• momentumLimitDistance: 15
• resizePolling: 60 重新调整窗口大小时，重新计算better-scroll的时间间隔
• preventDefault: true 是否阻止默认事件
• preventDefaultException: { tagName: - /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默认事件
• HWCompositing: true 是否启用硬件加速
• useTransition: true 是否使用CSS3的Transition属性，否则使用requestAnimationFram代替
• useTransform: true 是否使用CSS3的Transform属性
• • probeType: 1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发 - scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
  Events 事件
  

• let scroll = new BScroll(document.getElementById('wrapper'),{
     probeType: 3
  })
  
  scroll.on('scroll', (pos) => {
    console.log(pos.x + '~' + posx.y)
    ...
  })

  Events 列表

  • beforeScrollStart 滚动开始之前触发
  • scrollStart 滚动开始时触发
  • scroll 滚动时触发
  • scrollCancel 取消滚动时触发
  • scrollEnd 滚动结束时触发
  • flick
  • refresh
  • destroy 销毁better-scroll实例时触发
  派发滚动
  

  let scroll = new BScroll(document.getElementById('wrapper'))
  scroll.scrollTo(0, 500)
  ...

  
  使用手册:https://github.com/ustbhuangyi/better-scroll