better-scroll 简单实用说明

Posted 2020-10-13 mrt_yy

参数说明：

• 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)
...