原文地址:http://blog.csdn.net/qq_35844177/article/details/54629666
Vue中的better-scroll插件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
问题:
PC页面时,点击不会被 better-scroll阻止事件,初始化,给 better-scroll派发事件,使移动端拥有点击事件,因此切换到PC端时,点击事件会被执行两次,
方法:在点击时,传 $event变量,Better-scroll插件中的 event事件和原生 js的 event有属性上得区别,Better-scroll插件派发的事件时event_constructed为true,原生点击事件是没有这个属性的,
- 1
- 2
- 3
- 4
- 5
参数说明:
- 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 事件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Events 列表
- beforeScrollStart 滚动开始之前触发
- scrollStart 滚动开始时触发
- scroll 滚动时触发
- scrollCancel 取消滚动时触发
- scrollEnd 滚动结束时触发
- flick
- refresh
- destroy 销毁better-scroll实例时触发
派发滚动
使用手册: https://github.com/ustbhuangyi/better-scroll