BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用

BetterScroll 是一款重點(diǎn)解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開(kāi)源插件（ GitHub地址 ），適用于滾動(dòng)列表、選擇器、輪播圖、索引列表、開(kāi)屏引導(dǎo)等應(yīng)用場(chǎng)景。

為了滿足這些場(chǎng)景，它不僅支持慣性滾動(dòng)、邊界回彈、滾動(dòng)條淡入淡出等效果的靈活配置，讓滾動(dòng)更加流暢，同時(shí)還提供了很多 API 方法和事件，以便我們更快地實(shí)現(xiàn)滾動(dòng)場(chǎng)景下的需求，如下拉刷新、上拉加載。

由于它基于原生 JavaScript 實(shí)現(xiàn)，不依賴任何框架，所以既可以原生 JavaScript 引用，也可以與目前前端 MVVM 框架結(jié)合使用，比如，其官網(wǎng)上的示例就是與 Vue 的結(jié)合。

首先，讓我們來(lái)看一下它是怎樣讓滾動(dòng)更流暢的吧。

讓滾動(dòng)更流暢

在移動(dòng)端，如果你使用過(guò) overflow: scroll 生成一個(gè)滾動(dòng)容器，會(huì)發(fā)現(xiàn)它的滾動(dòng)是比較卡頓，呆滯的。為什么會(huì)出現(xiàn)這種情況呢？

因?yàn)槲覀冊(cè)缫蚜?xí)慣了目前的主流操作系統(tǒng)和瀏覽器視窗的滾動(dòng)體驗(yàn)，比如滾動(dòng)到邊緣會(huì)有回彈，手指停止滑動(dòng)以后還會(huì)按慣性繼續(xù)滾動(dòng)一會(huì)，手指快速滑動(dòng)時(shí)頁(yè)面也會(huì)快速滾動(dòng)。而這種原生滾動(dòng)容器卻沒(méi)有，就會(huì)讓人感到卡頓。

BetterScroll 的滾動(dòng)體驗(yàn)

試一試 BetterScroll 的滾動(dòng)體驗(yàn)吧。體驗(yàn)地址

可以發(fā)現(xiàn)，在增加慣性滾動(dòng)，邊緣回彈等效果之后，明顯流暢、舒服了很多。那么，這些效果是怎么實(shí)現(xiàn)的呢？

慣性滾動(dòng)

BetterScroll 在用戶滑動(dòng)操作結(jié)束時(shí)，還會(huì)繼續(xù)慣性滾動(dòng)一段。首先看一下源碼中的 BScroll.prototype._end 函數(shù)，這是 touchend、mouseup、touchcancel、mousecancel 事件的處理函數(shù)，也就是用戶滾動(dòng)操作結(jié)束時(shí)的邏輯。

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
 }
 ...
}

以上代碼的作用是，在用戶滑動(dòng)操作結(jié)束時(shí)，如果需要開(kāi)啟了慣性滾動(dòng)，用 momentum 函數(shù)計(jì)算慣性滾動(dòng)距離和時(shí)間。該函數(shù)，根據(jù)用戶滑動(dòng)操作的速度和 deceleration選項(xiàng) ——慣性減速來(lái)計(jì)算滾動(dòng)距離，至于滾動(dòng)時(shí)間，也是一個(gè)可配置的選項(xiàng)。

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

邊緣回彈

超過(guò)邊緣時(shí)的回彈，有兩個(gè)處理步驟，第一步是滾動(dòng)到超過(guò)邊界時(shí)速度要變慢，第二步是回彈到邊界。其中，第一步是在源碼的 BScroll.prototype._move 函數(shù)，這是 touchmove 和 mousemove 事件的處理函數(shù)，也就是在用戶滑動(dòng)操作過(guò)程中的邏輯。

// 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
 }
}

第二步是調(diào)用 BScroll.prototype.resetPosition 函數(shù)，回彈到邊界。

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

流暢的滾動(dòng)僅僅是基礎(chǔ)，BetterScoll 真正的能力在于：提供了大量通用 / 定制的option 選項(xiàng) 、API 方法和事件，讓各種滾動(dòng)需求實(shí)現(xiàn)起來(lái)更高效。

如何應(yīng)用于各種需求場(chǎng)景

下面，以結(jié)合 Vue 的使用為例，說(shuō)一下 BetterScroll 在各種場(chǎng)景下的姿勢(shì)。

普通滾動(dòng)列表

比如，有如下列表：

{{item}}

我們想要讓它垂直滾動(dòng)，只需要對(duì)該容器進(jìn)行簡(jiǎn)單的初始化。

import BScroll from 'better-scroll'
const options = {
 scrollY: true // 因?yàn)閟crollY默認(rèn)為true，其實(shí)可以省略
}
this.scroll = new BScroll(this.$refs.wrapper, options)

對(duì)于 Vue 中使用 BetterScroll，有一個(gè)需要注意的點(diǎn)是，因?yàn)樵?Vue 模板中列表渲染還沒(méi)完成時(shí)，是沒(méi)有生成列表 DOM 元素的，所以需要在確保列表渲染完成以后，才能創(chuàng)建 BScroll 實(shí)例，因此在 Vue 中，初始化 BScroll 的最佳時(shí)機(jī)是 mouted 的 nextTick。

// 在 Vue 中，保證列表渲染完成時(shí)，初始化 BScroll
mounted() {
 setTimeout(() => {
 this.scroll = new BScroll(this.$refs.wrapper, options)
 }, 20)
},

初始化之后，這個(gè) wrapper 容器就能夠優(yōu)雅地滾動(dòng)了，并且可以通過(guò) BScroll 實(shí)例 this.scroll 使用其提供的 API 方法和事件。

下面介紹幾個(gè)常用的選項(xiàng)、方法和事件。

滾動(dòng)條

scrollbar 選項(xiàng)，用來(lái)配置滾動(dòng)條，默認(rèn)為 false。當(dāng)設(shè)置為 true 或者是一個(gè) Object，開(kāi)啟滾動(dòng)條。還可以通過(guò) fade 屬性，配置滾動(dòng)條是隨著滾動(dòng)操作淡入淡出，還是一直顯示。

// fade 默認(rèn)為 true，滾動(dòng)條淡入淡出
options.scrollbar = true
// 滾動(dòng)條一直顯示
options.scrollbar = {
 fade: false
}
this.scroll = new BScroll(this.$refs.wrapper, options)

具體效果可見(jiàn)普通滾動(dòng)列表-示例。

下拉刷新

pullDownRefresh 選項(xiàng)，用來(lái)配置下拉刷新功能。當(dāng)設(shè)置為 true 或者是一個(gè) Object 的時(shí)候，開(kāi)啟下拉刷新，可以配置頂部下拉的距離（threshold）來(lái)決定刷新時(shí)機(jī)，以及回彈停留的距離（stop）

options.pullDownRefresh = {
 threshold: 50, // 當(dāng)下拉到超過(guò)頂部 50px 時(shí)，觸發(fā) pullingDown 事件
 stop: 20 // 刷新數(shù)據(jù)的過(guò)程中，回彈停留在距離頂部還有 20px 的位置
}
this.scroll = new BScroll(this.$refs.wrapper, options)

監(jiān)聽(tīng) pullingDown 事件，刷新數(shù)據(jù)。并在刷新數(shù)據(jù)完成之后，調(diào)用 finishPullDown() 方法，回彈到頂部邊界

this.scroll.on('pullingDown', () => {
 // 刷新數(shù)據(jù)的過(guò)程中，回彈停留在距離頂部還有20px的位置
 RefreshData()
 .then((newData) => {
 this.data = newData
 // 在刷新數(shù)據(jù)完成之后，調(diào)用 finishPullDown 方法，回彈到頂部
 this.scroll.finishPullDown()
 })
})

具體效果可見(jiàn)普通滾動(dòng)列表-示例。

上拉加載

pullUpLoad 選項(xiàng)，用來(lái)配置上拉加載功能。當(dāng)設(shè)置為 true 或者是一個(gè) Object 的時(shí)候，可以開(kāi)啟上拉加載，可以配置離底部距離閾值（threshold）來(lái)決定開(kāi)始加載的時(shí)機(jī)

options.pullUpLoad = {
 threshold: -20 // 在上拉到超過(guò)底部 20px 時(shí)，觸發(fā) pullingUp 事件
}
this.scroll = new BScroll(this.$refs.wrapper, options)

監(jiān)聽(tīng) pullingUp 事件，加載新數(shù)據(jù)。

this.scroll.on('pullingDown', () => {
 loadData()
 .then((newData) => {
 this.data.push(newData)
 })
})

具體效果可見(jiàn)普通滾動(dòng)列表-示例。

選擇器

wheel 選項(xiàng)，用于開(kāi)啟并配置選擇器。可配置選擇器當(dāng)前選擇的索引（selectedIndex），列表的彎曲弧度（rotate），以及切換選擇項(xiàng)的調(diào)整時(shí)間（adjustTime）。

options.wheel = {
 selectedIndex: 0,
 rotate: 25,
 adjustTime: 400
}
// 初始化選擇器的每一列
this.wheels[i] = new BScroll(wheelWrapper.children[i], options)

具體效果可見(jiàn)選擇器 - 示例。

其中聯(lián)動(dòng)選擇器，需要監(jiān)聽(tīng)每個(gè)選擇列表的選擇，來(lái)改變其他選擇列表。

data() {
 return {
 tempIndex: [0, 0, 0]
 }
},
...
// 監(jiān)聽(tīng)每個(gè)選擇列表的選擇
this.wheels[i].on('scrollEnd', () => {
 this.tempIndex.splice(i, 1, this.wheels[i].getSelectedIndex())
})
...
// 根據(jù)當(dāng)前選擇項(xiàng)，確定其他選擇列表的內(nèi)容
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]
 }
},

具體效果可見(jiàn)選擇器 - 示例中的聯(lián)動(dòng)選擇器。

輪播圖

snap 選項(xiàng)，用于開(kāi)啟并配置輪播圖。可配置輪播圖是否循環(huán)播放（loop），每頁(yè)的寬度（stepX）和高度（stepY），切換閾值（threshold），以及切換速度（speed）。

options = {
 scrollX: true,
 snap: {
 loop: true, // 開(kāi)啟循環(huán)播放
 stepX: 200, // 每頁(yè)寬度為 200px
 stepY: 100, // 每頁(yè)高度為 100px
 threshold: 0.3, // 滾動(dòng)距離超過(guò)寬度/高度的 30% 時(shí)切換圖片
 speed: 400 // 切換動(dòng)畫(huà)時(shí)長(zhǎng) 400ms
 }
}
this.slide = BScroll(this.$refs.slide, options)

具體效果可見(jiàn)輪播圖 - 示例。

特殊場(chǎng)景

除了普通滾動(dòng)列表、選擇器、輪播圖等基礎(chǔ)滾動(dòng)場(chǎng)景，還可以利用 BetterScroll 提供的能力，做一些特殊場(chǎng)景。

索引列表

索引列表，首先需要在滾動(dòng)過(guò)程中實(shí)時(shí)監(jiān)聽(tīng)滾動(dòng)到哪個(gè)索引的區(qū)域了，來(lái)更新當(dāng)前索引。在這種場(chǎng)景下，我們可以使用 probeType 選項(xiàng)，當(dāng)此選項(xiàng)設(shè)置為 3 時(shí)，會(huì)在整個(gè)滾動(dòng)過(guò)程中實(shí)時(shí)派發(fā) scroll 事件。從而獲取滾動(dòng)過(guò)程中的位置。

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
 }
 }
})

當(dāng)點(diǎn)擊索引時(shí)，使用 scrollToElement()方法 滾動(dòng)到該索引區(qū)域。

scrollTo(index) {
 this.$refs.indexList.scrollToElement(this.$refs.listGroup[index], 0)
}

具體效果可見(jiàn)索引列表 - 示例。

開(kāi)屏引導(dǎo)

開(kāi)屏引導(dǎo)，其實(shí)就是一種不自動(dòng)循環(huán)播放的橫向滾動(dòng)輪播圖而已。

options = {
 scrollX: true,
 snap: {
 loop: false
 }
}
this.slide = BScroll(this.$refs.slide, options)

具體效果可見(jiàn)開(kāi)屏引導(dǎo) - 示例。因?yàn)榇诵枨髨?chǎng)景一般只有移動(dòng)端才有，所以最好在手機(jī)模式下看效果。

自由滾動(dòng)

freeScroll 選項(xiàng)，用于開(kāi)啟自由滾動(dòng)，允許橫向和縱向同時(shí)滾動(dòng)，而不限制在某個(gè)方向。

options.freeScroll = true

另外需要注意的是，此選項(xiàng)在eventPassthrough 設(shè)置了保持原生滾動(dòng)時(shí)無(wú)效。

具體效果可見(jiàn)自由滾動(dòng)-示例。

小結(jié)

BetterScroll 可以用于幾乎所有滾動(dòng)場(chǎng)景，本文僅介紹了在一些典型場(chǎng)景下的使用姿勢(shì)。

作為一款旨在解決移動(dòng)端滾動(dòng)需求的插件，BetterScroll 開(kāi)放的眾多選項(xiàng)、方法和事件，其實(shí)，就是提供了一種讓我們更加快捷、靈活、精準(zhǔn)時(shí)機(jī)地處理滾動(dòng)的能力。

以上所述是小編給大家介紹的BetterScroll 在移動(dòng)端滾動(dòng)場(chǎng)景的應(yīng)用，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com