better-scroll 简单实用说明


参数说明:

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM