better-scroll在vue中的坑
在咱們平常的移動端項目開發中，處理滾動列表是再常見不過的需求了，以滴滴爲例，能夠是這樣豎向滾動的列表，如圖所示：html
也能夠是橫向滾動的導航欄，如圖所示：vue
能夠打開「微信 —> 錢包—>滴滴出行」體驗效果。ios
咱們在實現這類滾動功能的時候，會用到我寫的第三方庫，better-scroll。git
什麼是 better-scrollbetter-scroll 是一個移動端滾動的解決方案，它是基於 iscroll 的重寫，它和 iscroll 的主要區別在這裏。better-scroll 也很強大，不只能夠作普通的滾動列表，還能夠作輪播圖、picker 等等。github
better-scroll 的滾動原理
很多同窗可能用過 better-scroll，我收到反饋最多的問題是：編程
個人 better-scroll 初始化了， 可是無法滾動。axios
不能滾動是現象，咱們得搞清楚這其中的根本緣由。在這以前，咱們先來看一下瀏覽器的滾動原理：
瀏覽器的滾動條你們都會遇到，當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當咱們的視口展現不下內容的時候，會經過滾動條的方式讓用戶滾動屏幕看到剩餘的內容。小程序
那麼對於 better-scroll 也是同樣的道理，咱們先來看一下 better-scroll 常見的 html 結構：promise
<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