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 使用
-
安裝 better-scroll
npm install better-scroll -
頁面中引入 better-scroll
import BScroll from ‘better-scroll‘ -
如果不支持 import，可使用
var BScroll = require(‘better-scroll‘)
頁面結構：
<div id="wrapper" ref="wrapper">
<ul class="container">
<li>...</li>
<li>...</li>
...
</ul>
</div>
注意：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
}
}
根據官方 API 的解釋可知，一些需要在頁面數據變化完成后才執行的函數需要寫在 $nextTick 中 。
this.$nextTick(() => {
this._initScroll()
})
三. better-scroll 參數
-
Options 參數
- startX: 0 開始的 X 軸位置
- startY: 0 開始的 Y 軸位置
- scrollY: true 滾動方向為 Y 軸
- scrollX: true 滾動方向為 X 軸
- click: true 是否派發 click 事件，通常判斷瀏覽器派發的 click 還是 betterscroll 派發的 click，可以用 event._constructed，若是 bs 派發的則為 true
- directionLockThreshold: 5
- momentum: true 當快速滑動時是否開啟滑動慣性
- bounce: true 是否啟用回彈動畫效果
- selectedIndex: 0 wheel 為 true 時有效，表示被選中的 wheel 索引
- rotate: 25 wheel 為 true 時有效，表示被選中的 wheel 每一層的旋轉角度
- wheel: false 該屬性是給 picker 組件使用的，普通的列表滾動不需要配置
- snap: false 該屬性是給 slider 組件使用的，普通的列表滾動不需要配置
- snapLoop: false 是否可以無縫循環輪播
- snapThreshold: 0.1 用手指滑動時頁面可切換的閾值，大於這個閾值可以滑動的下一頁
- snapSpeed: 400, 輪播圖切換的動畫時間
- swipeTime: 2500 swipe 持續時間
- bounceTime: 700 彈力動畫持續的毫秒數
- adjustTime: 400 wheel 為 true 有用，調整停留位置的時間
- swipeBounceTime: 1200 swipe 回彈 時間
- 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 屬性
- useTransform: true 是否使用 CSS3 的 Transform 屬性
- probeType: 1 滾動的時候會派發 scroll 事件，會截流。2滾動的時候實時派發 scroll 事件，不會截流。 3除了實時派發 scroll 事件，在 swipe 的情況下仍然能實時派發 scroll 事件
-
Events 事件
- beforeScrollStart - 滾動開始之前觸發
- scrollStart - 滾動開始時觸發
- scroll - 滾動時觸發
- scrollCancel - 取消滾動時觸發
- scrollEnd - 滾動結束時觸發
- touchend - 手指移開屏幕時觸發
- flick - 觸發了 fastclick 時的回調函數
- refresh - 當 better-scroll 刷新時觸發
- destroy - 銷毀 better-scroll 實例時觸發
let scroll = new BScroll(document.getElementById('wrapper'),{
cilick: true, probeType: 3})
scroll.on('scroll', (pos) => {
console.log(pos.x + '~' + pos.y)
})``` -
函數列表
-
scrollTo(x, y, time, easing)
滾動到某個位置，x,y 代表坐標，time 表示動畫時間，easing 表示緩動函數 -
scroll.scrollTo(0, 500)
scrollToElement(el, time, offsetX, offsetY, easing)
滾動到某個元素，el（必填）表示 dom 元素，time 表示動畫時間，offsetX 和 offsetY 表示坐標偏移量，easing 表示緩動函數 -
refresh()
強制 scroll 重新計算，當 better-scroll 中的元素發生變化的時候調用此方法 -
getCurrentPage()
snap 為 true 時，獲取滾動的當前頁，返回的對象結構為 {x, y, pageX, pageY}，其中 x,y 代表滾動橫向和縱向的位置；pageX，pageY 表示橫向和縱向的頁面索引。用法如：getCurrentPage().pageX -
goToPage(x, y, time, easing)
snap 為 true，滾動到對應的頁面，x 表示橫向頁面索引，y 表示縱向頁面索引， time 表示動畫，easing 表示緩動函數（可省略不寫） -
enable() 啟用 better-scroll，默認開啟
-
disable() 禁用 better-scroll
-
destroy() 銷毀 better-scroll，解綁事件
-