一款好用的移動端滾動插件BetterScroll
作者:滴滴webapp架構組-付楠
BetterScroll 是一款重點解決移動端各種滾動場景需求的開源插件(GitHub地址),適用於滾動列表、選擇器、輪播圖、索引列表、開屏引導等應用場景。
為瞭滿足這些場景,它不僅支持慣性滾動、邊界回彈、滾動條淡入淡出等效果的靈活配置,讓滾動更加流暢,同時還提供瞭很多 API 方法和事件,以便我們更快地實現滾動場景下的需求,如下拉刷新、上拉加載。
由於它基於原生 JavaScript 實現,不依賴任何框架,所以既可以原生 JavaScript 引用,也可以與目前前端 MVVM 框架結合使用,比如,其官網上的示例就是與 Vue 的結合。
首先,讓我們來看一下它是怎樣讓滾動更流暢的吧。
讓滾動更流暢
在移動端,如果你使用過 overflow: scroll 生成一個滾動容器,會發現它的滾動是比較卡頓,呆滯的。為什麼會出現這種情況呢?
因為我們早已習慣瞭目前的主流操作系統和瀏覽器視窗的滾動體驗,比如滾動到邊緣會有回彈,手指停止滑動以後還會按慣性繼續滾動一會,手指快速滑動時頁面也會快速滾動。而這種原生滾動容器卻沒有,就會讓人感到卡頓。
BetterScroll 的滾動體驗
試一試 BetterScroll 的滾動體驗吧。體驗地址
可以發現,在增加慣性滾動,邊緣回彈等效果之後,明顯流暢、舒服瞭很多。那麼,這些效果是怎麼實現的呢?
慣性滾動
BetterScroll 在用戶滑動操作結束時,還會繼續慣性滾動一段。首先看一下源碼中的 BScroll.prototype._end 函數,這是 touchend、mouseup、touchcancel、mousecancel 事件的處理函數,也就是用戶滾動操作結束時的邏輯。
BScroll.prototype._end = function (e) { ... if (this.options.momentum && duration < this.options.momentumLimitTime && (absDistY > this.options.momentumLimitDistance || absDistX > this.options.momentumLimitDistance)) { let momentumX = this.hasHorizontalScroll ? momentum(this.x, this.startX, duration, this.maxScrollX, this.options.bounce ? this.wrapperWidth : 0, this.options) : {destination: newX, duration: 0} let momentumY = this.hasVerticalScroll ? momentum(this.y, this.startY, duration, this.maxScrollY, this.options.bounce ? this.wrapperHeight : 0, this.options) : {destination: newY, duration: 0} newX = momentumX.destination newY = momentumY.destination time = Math.max(momentumX.duration, momentumY.duration) this.isInTransition = 1 } ... }
以上代碼的作用是,在用戶滑動操作結束時,如果需要開啟瞭慣性滾動,用 momentum 函數計算慣性滾動距離和時間。該函數,根據用戶滑動操作的速度和 deceleration選項 ——慣性減速來計算滾動距離,至於滾動時間,也是一個可配置的選項。
function momentum(current, start, time, lowerMargin, wrapperSize, options) { ... let distance = current - start let speed = Math.abs(distance) / time ... let duration = swipeTime let destination = current + speed / deceleration * (distance < 0 ? -1 : 1) ... }
邊緣回彈
超過邊緣時的回彈,有兩個處理步驟,第一步是滾動到超過邊界時速度要變慢,第二步是回彈到邊界。其中,第一步是在源碼的 BScroll.prototype._move 函數,這是 touchmove 和 mousemove 事件的處理函數,也就是在用戶滑動操作過程中的邏輯。
// Slow down or stop if outside of the boundaries if (newY > 0 || newY < this.maxScrollY) { if (this.options.bounce) { newY = this.y + deltaY / 3 } else { newY = newY > 0 ? 0 : this.maxScrollY } }
第二步是調用BScroll.prototype.resetPosition函數,回彈到邊界。
BScroll.prototype.resetPosition = function (time = 0, easeing = ease.bounce) { ... let y = this.y if (!this.hasVerticalScroll || y > 0) { y = 0 } else if (y < this.maxScrollY) { y = this.maxScrollY } ... this.scrollTo(x, y, time, easeing) ... }
流暢的滾動僅僅是基礎,BetterScoll 真正的能力在於:提供瞭大量通用 / 定制的 option 選項 、 API 方法和事件,讓各種滾動需求實現起來更高效。
如何應用於各種需求場景
下面,以結合 Vue 的使用為例,說一下 BetterScroll 在各種場景下的姿勢。
普通滾動列表
比如,有如下列表:
<div ref="wrapper" class="list-wrapper"> <ul class="list-content"> <li @click="clickItem($event,item)" class="list-item" v-for="item in data">{{item}}</li> </ul> </div>
我們想要讓它垂直滾動,隻需要對該容器進行簡單的初始化。
import BScroll from 'better-scroll' const options = { scrollY: true // 因為scrollY默認為true,其實可以省略 } this.scroll = new BScroll(this.$refs.wrapper, options)
對於 Vue 中使用 BetterScroll,有一個需要註意的點是,因為在 Vue 模板中列表渲染還沒完成時,是沒有生成列表 DOM 元素的,所以需要在確保列表渲染完成以後,才能創建 BScroll 實例,因此在 Vue 中,初始化 BScroll 的最佳時機是 mouted 的 nextTick。
// 在 Vue 中,保證列表渲染完成時,初始化 BScroll mounted() { setTimeout(() => { this.scroll = new BScroll(this.$refs.wrapper, options) }, 20) },
初始化之後,這個 wrapper 容器就能夠優雅地滾動瞭,並且可以通過 BScroll 實例this.scroll使用其提供的 API 方法和事件。
下面介紹幾個常用的選項、方法和事件。
滾動條
scrollbar選項,用來配置滾動條,默認為 false。當設置為 true 或者是一個 Object,開啟滾動條。還可以通過 fade 屬性,配置滾動條是隨著滾動操作淡入淡出,還是一直顯示。
// fade 默認為 true,滾動條淡入淡出 options.scrollbar = true // 滾動條一直顯示 options.scrollbar = { fade: false } this.scroll = new BScroll(this.$refs.wrapper, options)
具體效果可見普通滾動列表-示例。
下拉刷新
pullDownRefresh選項,用來配置下拉刷新功能。當設置為 true 或者是一個 Object 的時候,開啟下拉刷新,可以配置頂部下拉的距離(threshold)來決定刷新時機,以及回彈停留的距離(stop)
options.pullDownRefresh = { threshold: 50, // 當下拉到超過頂部 50px 時,觸發 pullingDown 事件 stop: 20 // 刷新數據的過程中,回彈停留在距離頂部還有 20px 的位置 } this.scroll = new BScroll(this.$refs.wrapper, options)
監聽 pullingDown 事件,刷新數據。並在刷新數據完成之後,調用 finishPullDown() 方法,回彈到頂部邊界
this.scroll.on('pullingDown', () => { // 刷新數據的過程中,回彈停留在距離頂部還有20px的位置 RefreshData() .then((newData) => { this.data = newData // 在刷新數據完成之後,調用 finishPullDown 方法,回彈到頂部 this.scroll.finishPullDown() }) })
具體效果可見普通滾動列表-示例。
上拉加載
pullUpLoad選項,用來配置上拉加載功能。當設置為 true 或者是一個 Object 的時候,可以開啟上拉加載,可以配置離底部距離閾值(threshold)來決定開始加載的時機
options.pullUpLoad = { threshold: -20 // 在上拉到超過底部 20px 時,觸發 pullingUp 事件 } this.scroll = new BScroll(this.$refs.wrapper, options)
監聽 pullingUp 事件,加載新數據。
this.scroll.on('pullingUp', () => { loadData() .then((newData) => { this.data.push(newData) }) })
具體效果可見普通滾動列表-示例。
選擇器
wheel選項,用於開啟並配置選擇器。可配置選擇器當前選擇的索引(selectedIndex),列表的彎曲弧度(rotate),以及切換選擇項的調整時間(adjustTime)。
options.wheel = { selectedIndex: 0, rotate: 25, adjustTime: 400 } // 初始化選擇器的每一列 this.wheels[i] = new BScroll(wheelWrapper.children[i], options)
具體效果可見選擇器 – 示例。
其中聯動選擇器,需要監聽每個選擇列表的選擇,來改變其他選擇列表。
data() { return { tempIndex: [0, 0, 0] } }, ... // 監聽每個選擇列表的選擇 this.wheels[i].on('scrollEnd', () => { this.tempIndex.splice(i, 1, this.wheels[i].getSelectedIndex()) }) ... // 根據當前選擇項,確定其他選擇列表的內容 computed: { linkageData() { const provinces = provinceList const cities = cityList[provinces[this.tempIndex[0]].value] const areas = areaList[cities[this.tempIndex[1]].value] return [provinces, cities, areas] } },
具體效果可見選擇器 – 示例中的聯動選擇器。
輪播圖
snap選項,用於開啟並配置輪播圖。可配置輪播圖是否循環播放(loop),每頁的寬度(stepX)和高度(stepY),切換閾值(threshold),以及切換速度(speed)。
options = { scrollX: true, snap: { loop: true, // 開啟循環播放 stepX: 200, // 每頁寬度為 200px stepY: 100, // 每頁高度為 100px threshold: 0.3, // 滾動距離超過寬度/高度的 30% 時切換圖片 speed: 400 // 切換動畫時長 400ms } } this.slide = BScroll(this.$refs.slide, options)
具體效果可見輪播圖 – 示例。
特殊場景
除瞭普通滾動列表、選擇器、輪播圖等基礎滾動場景,還可以利用 BetterScroll 提供的能力,做一些特殊場景。
索引列表
索引列表,首先需要在滾動過程中實時監聽滾動到哪個索引的區域瞭,來更新當前索引。在這種場景下,我們可以使用probeType選項,當此選項設置為 3 時,會在整個滾動過程中實時派發 scroll 事件。從而獲取滾動過程中的位置。
options.probeType = 3 this.scroll = new BScroll(this.$refs.wrapper, options) this.scroll.on('scroll', (pos) => { const y = pos.y for (let i = 0; i < listHeight.length - 1; i++) { let height1 = listHeight[i] let height2 = listHeight[i + 1] if (-y >= height1 && -y < height2) { this.currentIndex = i } } })
當點擊索引時,使用scrollToElement()方法滾動到該索引區域。
scrollTo(index) { this.$refs.indexList.scrollToElement(this.$refs.listGroup[index], 0) }
具體效果可見索引列表 – 示例。
開屏引導
開屏引導,其實就是一種不自動循環播放的橫向滾動輪播圖而已。
options = { scrollX: true, snap: { loop: false } } this.slide = BScroll(this.$refs.slide, options)
具體效果可見開屏引導 – 示例。因為此需求場景一般隻有移動端才有,所以最好在手機模式下看效果。
自由滾動
freeScroll選項,用於開啟自由滾動,允許橫向和縱向同時滾動,而不限制在某個方向。
options.freeScroll = true
另外需要註意的是,此選項在 eventPassthrough 設置瞭保持原生滾動時無效。
具體效果可見自由滾動-示例。
小結
BetterScroll 可以用於幾乎所有滾動場景,本文僅介紹瞭在一些典型場景下的使用姿勢。
作為一款旨在解決移動端滾動需求的插件,BetterScroll 開放的眾多選項、方法和事件,其實,就是提供瞭一種讓我們更加快捷、靈活、精準時機地處理滾動的能力。
到此這篇關於一款好用的移動端滾動插件BetterScroll的文章就介紹到這瞭,更多相關BetterScroll移動端滾動插件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue使用better-scroll實現橫向滾動的方法實例
- 關於better-scroll插件的無法滑動bug(2021通過插件解決)
- Vue中利用better-scroll組件實現橫向滾動功能
- Appium中scroll和drag_and_drop根據元素位置滑動
- 關於vue3使用particles粒子特效的問題