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