當better-scroll 遇見Vue
前言:在學習黃軼老師的《Vue.js高仿餓了麼外賣App》課程中接觸到了better-scroll第三方JavaScript元件庫,這是黃軼老師自己基於iscroll重寫的庫。這裡結合黃軼老師的知乎文章和Vue2.0專案對better-scroll的具體應用,只作為學習,對其中的原理和應用步驟做一個梳理。
移動端專案列表滾動的需求
豎直滾動:
橫向滾動:
什麼是better-scroll
better-scroll 是一個移動端滾動的解決方案,它是基於 iscroll 的重寫,它和 iscroll 的主要區別在這裡。better-scroll 也很強大,不僅可以做普通的滾動列表,還可以做輪播圖、picker 等等。
- 安裝better-scroll
1 |
|
better-scroll 的滾動原理
瀏覽器的滾動原理:
瀏覽器的滾動條大家都會遇到,當頁面內容的高度超過視口高度的時候,會出現縱向滾動條;當頁面內容的寬度超過視口寬度的時候,會出現橫向滾動條。也就是當我們的視口展示不下內容的時候,會通過滾動條的方式讓使用者滾動螢幕看到剩餘的內容。
better-scroll的滾動原理:
- 常用的html結構
1 2 3 4 5 6 7 8 |
< ul class="content">
|
當 content 的高度不超過父容器的高度,是不能滾動的,而它一旦超過了父容器的高度,我們就可以滾動內容區了,這就是 better-scroll 的滾動原理
- 初始化better-scroll
1 2 3 |
|
關於引數:better-scroll 對外暴露了一個 BScroll 的類,我們初始化只需要 new 一個類的例項即可。
第一個引數就是我們 wrapper 的 DOM 物件,第二個是一些配置引數,具體參考 better-scroll 的文件。
better-scroll 的初始化時機:
- 初始化時機很重要,因為它在初始化的時候,會計算父元素和子元素的高度和寬度,來決定是否可以縱向和橫向滾動。因此,我們在初始化它的時候,必須確保父元素和子元素的內容已經正確渲染了。如果沒有辦法滑動,那就是初始化的時機不對。
- 如果子元素或者父元素 DOM 結構發生改變的時候,必須重新呼叫 scroll.refresh() 方法重新計算來確保滾動效果的正常。
- 所以常見的 better-scroll 不能滾動的原因多半是初始化 better-scroll 的時機不對,或者是當 DOM 結構傳送變化的時候並沒有重新計算 better-scroll。
在《Vuejs高仿餓了麼外賣App》課程中是這樣處理的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
- Vue2.0中提供了一個獲取 DOM 物件的介面—— vm.$refs,可以通過了this.$refs.wrapper訪問到了這個 DOM 物件
-
this.$nextTick()
這個方法作用是當資料被修改後使用這個方法會回撥獲取更新後的dom再render出來; 如果不在下面的this.$nextTick()
方法裡回撥這個方法,資料改變後再來計算滾動軸就會出錯
實現效果:
better-scroll不能滾動的原因
需要DOM載入完成後才能正確應用. vue中應用在$nextTick中,非同步初始化
子元素高度需要超過父元素。而且父元素需要設定高度(這才是better-scroll能夠滾動的原理)
better-scroll在使用的時候,滾動只作用於第一個子元素,其它的元素都會被忽略。在vue中,獲取的ref是ratings,它的子元素包含rating-content和rating-wrapper等多個同級元素,那麼需要在這些同級元素外層,ratings內層再套一個<div>,這個<div>才是需要滾動的部分
1 2 3 4 5 6 7 |
|
隱藏切換顯示都會導致外掛引數的scrollerHeight:0。此時需要加上click:true,使better-scroll支援點選事件,再呼叫下refresh()重新渲染DOM就行了
1 2 3 4 5 6 7 8 9 |
|
原文