在我們日常的移動端專案開發中，處理滾動列表是再常見不過的需求了，以滴滴為例，可以是這樣豎向滾動的列表，如圖所示：
也可以是橫向滾動的導航欄，如圖所示：
我們在實現這類滾動功能的時候，會用到我寫的第三方庫，better-scroll。
什麼是 better-scroll
better-scroll 是乙個移動端滾動的解決方案，它是基於 iscroll 的重寫，它和 iscroll 的主要區別在這裡。better-scroll 也很強大，不僅可以做普通的滾動列表，還可以做輪播圖、picker 等等。
不少同學可能用過 better-scroll，我收到反饋最多的問題是：
我的 better-scroll 初始化了， 但是沒法滾動。不能滾動是現象，我們得搞清楚這其中的根本原因。在這之前，我們先來看一下瀏覽器的滾動原理：
瀏覽器的滾動條大家都會遇到，當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當我們的視口展示不下內容的時候，會通過滾動條的方式讓使用者滾動螢幕看到剩餘的內容。
那麼對於 better-scroll 也是一樣的道理，我們先來看一下 better-scroll 常見的 html 結構：
......
為了更加直觀，我們再來看一張圖：
那麼，我們怎麼初始化 better-scroll 呢，如果是上述 html 結構，那麼初始化**如下：
better-scroll 的初始化時機很重要，因為它在初始化的時候，會計算父元素和子元素的高度和寬度，來決定是否可以縱向和橫向滾動。因此，我們在初始化它的時候，必須確保父元素和子元素的內容已經正確渲染了。如果子元素或者父元素 dom 結構發生改變的時候，必須重新呼叫scroll.refresh()方法重新計算來確保滾動效果的正常。所以同學們反饋的 better-scroll 不能滾動的原因多半是初始化 better-scroll 的時機不對，或者是當 dom 結構傳送變化的時候並沒有重新計算 better-scroll。
better-scroll 遇見 vue
相信很多同學對 vue.js 都不陌生，當 better-scroll 遇見 vue，會擦出怎樣的火花呢？
......
這裡的this.$nexttick是乙個非同步函式，為了確保 dom 已經渲染，感興趣的同學可以了解一下它的內部實現細節，底層用到了 mutationobserver 或者是settimeout(fn, 0)。其實我們在這裡把this.$nexttick替換成settimeout(fn, 20)也是可以的（20 ms 是乙個經驗值，每乙個 tick 約為 17 ms），對使用者體驗而言都是無感知的。
在我們的實際工作中，列表的資料往往都是非同步獲取的，因此我們初始化 better-scroll 的時機需要在資料獲取後，**如下：
importbscrollfrom 'better-scroll'exportdefault},created(),/**
* 點選列表是否派發click事件
*/click:,/**
* 是否開啟橫向滾動
*/scrollx:,/**
* 是否派發滾動事件
*/listenscroll:,/**
* 列表的資料
*/data:,/**
* 是否派發滾動到底部的事件，用於上拉載入
*/pullup:,/**
* 是否派發頂部下拉的事件，用於下拉重新整理
*/pulldown:,/**
* 是否派發列表滾動開始的事件
*/beforescroll:,/**
* 當資料更新後，重新整理scroll的延時。
better scroll 在vue中的使用
test box class box style height 400px overflow hidden content green li yellow li red ref red li blue li ul div gored 跳轉到紅色 button div template import ...
better scroll 實現無縫輪播
better scroll 適用於解決移動端各種滾動場景，滾動列表 輪播圖等。better scroll新版本設定輪播圖有一些變動。slider.vue 結構及部分樣式設定 插槽位置即輪播圖，在引入主頁面的中間插入 小圓點採用絕對定位 import common stylus variable sl...
better scroll 上拉載入
首先需要乙個使用了bs編寫的列表 肯定是不能有bug的 bs中文文件 this.actscroll new bscroll actbox,pullupload 在初始化配置項裡面新增pullupload配置選項，給定上拉的數值 觸發上拉載入的事件，呼叫getinfo 請求資料 this.actscr...