better-scroll是一個頁面滾動插件，用它可以很方便的實現下拉刷新，錨點滾動等功能。
實現原理：父容器固定高度，並設置overflow：hidden，子元素超出父元素高度后將被隱藏，超出部分可滾動且沒有滾動條。
立即使用：
<body> <div id="wrapper"> <ul> <li>...</li> <li>...</li> ... </ul> </div> <script type="text/javascript" src="better-scroll.js"></script> <script type="text/javascript"> new BScroll(document.getElementById('wrapper')); </script> </body>
結合vue使用：
通過npm引入
1. 安裝better-scroll
npm install better-scroll
2. 頁面中引入better-scroll
import BScroll from 'better-scroll'
3. 如果不支持import，可使用
var BScroll =
<div id="wrapper" ref="wrapper"> <ul class="container"> <li>...</li> <li>...</li> ... </ul> </div>
_initScroll() { this.boxScroll= new BScroll(this.$refs.wrapper, { click: true }) },
注意：
better-scroll會將點擊事件去掉，如果滾動部分需要有點擊事件，需要在參數里加上click：true。
同時，在PC上或某些手機端，由於未成功將touchend事件move掉，點擊事件會執行兩次。
better-scroll派發的event事件和原生js的event有屬性上的區別，其中有一個屬性為event._constructed。better-scroll派發的事件中event._constructed為true，原生點擊事件中沒有這個屬性。
selectList(index,event){ if(!event._constructed){//如果不存在這個屬性,則為原生點擊事件，不執行下面的函數 return } }
由於vue中數據更新是異步的，在dom解構沒有加載完成，BScroll無法獲取目標容器的高度，會出現無法滾動的現象。
vue中有一個方法可以解決這個問題：$nextTick()
根據官方API的解釋可知，一些需要在頁面數據變化完成后才執行的函數需要寫在$nextTick中 。
this.$nextTick(() => { this._initScroll() })
附better-scroll參數：
- startX: 0 開始的X軸位置
- startY: 0 開始的Y軸位置
- scrollX: true 滾動方向為X軸
- scrollY: true 滾動方向為Y軸
- 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事件
參考網站：
https://www.npmjs.com/package/better-scroll better-scroll文檔
https://github.com/ustbhuangyi/better-scroll github