better-scroll 是一個移動端滾動的解決方案,它是基於 iscroll 的重寫,它和 iscroll 的主要區別在這裏。better-scroll 也很強大,不僅可以做普通的滾動列表,還可以做輪播圖、picker 等等。
better-scroll 的滾動原理
不少同學可能用過 better-scroll,我收到反饋最多的問題是:
我的 better-scroll 初始化了, 但是沒法滾動。
不能滾動是現象,我們得搞清楚這其中的根本原因。在這之前,我們先來看一下瀏覽器的滾動原理:
瀏覽器的滾動條大家都會遇到,當頁面內容的高度超過視口高度的時候,會出現縱向滾動條;當頁面內容的寬度超過視口寬度的時候,會出現橫向滾動條。也就是當我們的視口展示不下內容的時候,會通過滾動條的方式讓用戶滾動屏幕看到剩餘的內容。
那麼對於 better-scroll 也是一樣的道理,我們先來看一下 better-scroll 常見的 html 結構:
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
爲了更加直觀,我們再來看一張圖:
綠色部分爲 wrapper,也就是父容器,它會有固定的高度。黃色部分爲 content,它是父容器的第一個子元素,它的高度會隨着內容的大小而撐高。那麼,當 content 的高度不超過父容器的高度,是不能滾動的,而它一旦超過了父容器的高度,我們就可以滾動內容區了,這就是 better-scroll 的滾動原理。
那麼,我們怎麼初始化 better-scroll 呢,如果是上述 html 結構,那麼初始化代碼如下:
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper, {})
better-scroll 對外暴露了一個 BScroll 的類,我們初始化只需要 new 一個類的實例即可。第一個參數就是我們 wrapper 的 DOM 對象,第二個是一些配置參數,具體參考 better-scroll 的文檔。
better-scroll 的初始化時機很重要,因爲它在初始化的時候,會計算父元素和子元素的高度和寬度,來決定是否可以縱向和橫向滾動。因此,我們在初始化它的時候,必須確保父元素和子元素的內容已經正確渲染了。如果子元素或者父元素 DOM 結構發生改變的時候,必須重新調用 scroll.refresh()
方法重新計算來確保滾動效果的正常。所以同學們反饋的 better-scroll 不能滾動的原因多半是初始化 better-scroll
的時機不對,或者是當 DOM 結構發送變化的時候並沒有重新計算 better-scroll。
相信很多同學對 Vue.js 都不陌生,當 better-scroll 遇見 Vue,會擦出怎樣的火花呢?
如何在 Vue 中使用 better-scroll
很多同學開始接觸使用 better-scroll 都是受到了我的一門教學課程——《Vue.js高仿餓了麼外賣App》 的影響。在那門課程中,我們把 better-scroll 和 Vue 做了結合,實現了很多列表滾動的效果。在 Vue 中的使用方法如下:
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
mounted() {
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrapper, {})
})
}
}
</script>
Vue.js 提供了我們一個獲取 DOM 對象的接口—— vm.$refs
。在這裏,我們通過了 this.$refs.wrapper
訪問到了這個 DOM 對象,並且我們在 mounted 這個鉤子函數裏,this.$nextTick
的回調函數中初始化
better-scroll 。因爲這個時候,wrapper 的 DOM 已經渲染了,我們可以正確計算它以及它內層 content 的高度,以確保滾動正常。
這裏的 this.$nextTick
是一個異步函數,爲了確保 DOM 已經渲染,感興趣的同學可以瞭解一下它的內部實現細節,底層用到了
MutationObserver 或者是 setTimeout(fn, 0)
。其實我們在這裏把 this.$nextTick
替換成 setTimeout(fn, 20)
也是可以的(20 ms 是一個經驗值,每一個 Tick 約爲 17 ms),對用戶體驗而言都是無感知的。
異步數據的處理
在我們的實際工作中,列表的數據往往都是異步獲取的,因此我們初始化 better-scroll 的時機需要在數據獲取後,代碼如下:
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="item in data">{{item}}</li>
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
data: []
}
},
created() {
requestData().then((res) => {
this.data = res.data
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrapper, {})
})
})
}
}
</script>
這裏的 requestData 是僞代碼,作用就是發起一個 http 請求從服務端獲取數據,並且這個函數返回的是一個 promise(實際項目中我們可能會用 axios 或者 vue-resource)。我們獲取到數據的後,需要通過異步的方式再去初始化
better-scroll,因爲 Vue 是數據驅動的, Vue 數據發生變化(this.data = res.data
)到頁面重新渲染是一個異步的過程,我們的初始化時機是要在 DOM 重新渲染後,所以這裏用到了 this.$nextTick
,當然替換成 setTimeout(fn,
20)
也是可以的。
爲什麼這裏在 created 這個鉤子函數裏請求數據而不是放到 mounted 的鉤子函數裏?因爲 requestData 是發送一個網絡請求,這是一個異步過程,當拿到響應數據的時候,Vue 的 DOM 早就已經渲染好了,但是數據改變 —> DOM 重新渲染仍然是一個異步過程,所以即使在我們拿到數據後,也要異步初始化 better-scroll。
數據的動態更新
我們在實際開發中,除了數據異步獲取,還有一些場景可以動態更新列表中的數據,比如常見的下拉加載,上拉刷新等。比如我們用 better-scroll 配合 Vue 實現下拉加載功能,代碼如下:
<template>
<div class="wrapper" ref="wrapper">
<ul class="content">
<li v-for="item in data">{{item}}</li>
</ul>
<div class="loading-wrapper"></div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
data: []
}
},
created() {
this.loadData()
},
methods: {
loadData() {
requestData().then((res) => {
this.data = res.data.concat(this.data)
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new Bscroll(this.$refs.wrapper, {})
this.scroll.on('touchend', (pos) => {
// 下拉動作
if (pos.y > 50) {
this.loadData()
}
})
} else {
this.scroll.refresh()
}
})
})
}
}
}
</script>
這段代碼比之前稍微複雜一些, 當我們在滑動列表鬆開手指時候, better-scroll 會對外派發一個 touchend 事件,我們監聽了這個事件,並且判斷了 pos.y > 50(我們把這個行爲定義成一次下拉的動作)。如果是下拉的話我們會重新請求數據,並且把新的數據和之前的 data 做一次 concat,也就更新了列表的數據,那麼數據的改變就會映射到 DOM 的變化。需要注意的一點,這裏我們對 this.scroll
做了判斷,如果沒有初始化過我們會通過 new
BScroll
初始化,並且綁定一些事件,否則我們會調用 this.scroll.refresh
方法重新計算,來確保滾動效果的正常。
這裏,我們就通過 better-scroll 配合 Vue,實現了列表的下拉刷新功能,上拉加載也是類似的套路,一切看上去都是 ok 的。但是,我們發現這裏寫了大量命令式的代碼(這一點不是 Vue.js 推薦的),如果有很多類似滾動的組件,我們就需要寫很多類似的命令式且重複性的代碼,而且我們把數據請求和 better-scroll 也做了強耦合,這些對於一個追求編程逼格的人來說,就不 ok 了。
scroll 組件的抽象和封裝因此,我們有強烈的需求抽象出來一個 scroll 組件,類似小程序的 scroll-view 組件,方便開發者的使用。
首先,我們要考慮的是 scroll 組件本質上就是一個可以滾動的列表組件,至於列表的 DOM 結構,只需要滿足 better-scroll 的 DOM 結構規範即可,具體用什麼標籤,有哪些輔助節點(比如下拉刷新上拉加載的 loading 層),這些都不是 scroll 組件需要關心的。因此, scroll 組件的 DOM 結構十分簡單,如下所示:
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
這裏我們用到了 Vue 的特殊元素—— slot 插槽,它可以滿足我們靈活定製列表 DOM 結構的需求。接下來我們來看看 JS 部分:
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
export default {
props: {
/**
* 1 滾動的時候會派發scroll事件,會截流。
* 2 滾動的時候實時派發scroll事件,不會截流。
* 3 除了實時派發scroll事件,在swipe的情況下仍然能實時派發scroll事件
*/
probeType: {
type: Number,
default: 1
},
/**
* 點擊列表是否派發click事件
*/
click: {
type: Boolean,
default: true
},
/**
* 是否開啓橫向滾動
*/
scrollX: {
type: Boolean,
default: false
},
/**
* 是否派發滾動事件
*/
listenScroll: {
type: Boolean,
default: false
},
/**
* 列表的數據
*/
data: {
type: Array,
default: null
},
/**
* 是否派發滾動到底部的事件,用於上拉加載
*/
pullup: {
type: Boolean,
default: false
},
/**
* 是否派發頂部下拉的事件,用於下拉刷新
*/
pulldown: {
type: Boolean,
default: false
},
/**
* 是否派發列表滾動開始的事件
*/
beforeScroll: {
type: Boolean,
default: false
},
/**
* 當數據更新後,刷新scroll的延時。
*/
refreshDelay: {
type: Number,
default: 20
}
},
mounted() {
// 保證在DOM渲染完畢後初始化better-scroll
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
// better-scroll的初始化
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX
})
// 是否派發滾動事件
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
me.$emit('scroll', pos)
})
}
// 是否派發滾動到底部事件,用於上拉加載
if (this.pullup) {
this.scroll.on('scrollEnd', () => {
// 滾動到底部
if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
this.$emit('scrollToEnd')
}
})
}
// 是否派發頂部下拉事件,用於下拉刷新
if (this.pulldown) {
this.scroll.on('touchend', (pos) => {
// 下拉動作
if (pos.y > 50) {
this.$emit('pulldown')
}
})
}
// 是否派發列表滾動開始的事件
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
disable() {
// 代理better-scroll的disable方法
this.scroll && this.scroll.disable()
},
enable() {
// 代理better-scroll的enable方法
this.scroll && this.scroll.enable()
},
refresh() {
// 代理better-scroll的refresh方法
this.scroll && this.scroll.refresh()
},
scrollTo() {
// 代理better-scroll的scrollTo方法
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
// 代理better-scroll的scrollToElement方法
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
// 監聽數據的變化,延時refreshDelay時間後調用refresh方法重新計算,保證滾動效果正常
data() {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
</script>
JS 部分實際上就是對 better-scroll 做一層 Vue 的封裝,通過 props 的形式,把一些對 better-scroll 定製化的控制權交給父組件;通過 methods 暴露的一些方法對 better-scroll 的方法做一層代理;通過 watch 傳入的 data,當 data 發生改變的時候,在適當的時機調用 refresh 方法重新計算 better-scroll 確保滾動效果正常,這裏之所以要有一個 refreshDelay 的設置是考慮到如果我們對列表操作用到了 transition-group 做動畫效果,那麼 DOM 的渲染完畢時間就是在動畫完成之後。
有了這一層 scroll 組件的封裝,我們來修改剛剛最複雜的代碼(假設我們已經全局註冊了 scroll 組件)。
<template>
<scroll class="wrapper"
:data="data"
:pulldown="pulldown"
@pulldown="loadData">
<ul class="content">
<li v-for="item in data">{{item}}</li>
</ul>
<div class="loading-wrapper"></div>
</scroll>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data() {
return {
data: [],
pulldown: true
}
},
created() {
this.loadData()
},
methods: {
loadData() {
requestData().then((res) => {
this.data = res.data.concat(this.data)
})
}
}
}
</script>
可以很明顯的看到我們的 JS 部分精簡了非常多的代碼,沒有對 better-scroll 再做命令式的操作了,同時把數據請求和 better-scroll 也做了剝離,父組件只需要把數據 data 通過 prop 傳給 scroll 組件,就可以保證 scroll 組件的滾動效果。同時,如果想實現下拉刷新的功能,只需要通過 prop 把 pulldown 設置爲 true,並且監聽 pulldown 的事件去做一些數據獲取並更新的動作即可,整個邏輯也是非常清晰的。
插件 Vue 化引發的一些思考這篇文章我不僅僅是要教會大家封裝一個 scroll 組件,還想傳遞一些把第三方插件(原生 JS 實現)Vue 化的思考過程。很多學習 Vue.js 的同學可能還停留在 “XX 效果如何用 Vue.js 實現” 的程度,其實把插件 Vue 化有兩點很關鍵,一個是對插件本身的實現原理很瞭解,另一個是對 Vue.js 的特性很瞭解。對插件本身的實現原理了解需要的是一個思考和鑽研的過程,這個過程可能困難,但是收穫也是巨大的;而對 Vue.js 的特性的瞭解,是需要大家對 Vue.js 多多使用,學會從平時的項目中積累和總結,也要善於查閱 Vue.js 的官方文檔,關注一些 Vue.js 的升級等。
本文原創發佈於慕課網 ,轉載請註明出處,謝謝合作!