better-scroll滾動插件的使用

better-scroll 是什麼？

better-scroll 是一款重點解決移動端（已支持 PC）各類滾動場景需求的插件。它的核心是借鑑的 iscroll 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及作了一些性能優化。

better-scroll 是基於原生 JS 實現的，不依賴任何框架。它編譯後的代碼大小是 63kb，壓縮後是 35kb，gzip 後僅有 9kb，是一款很是輕量的 JS lib。

滾動原理

先來看一下瀏覽器的滾動原理：瀏覽器的滾動條你們都會遇到，當頁面內容的高度超過視口高度的時候，會出現縱向滾動條；當頁面內容的寬度超過視口寬度的時候，會出現橫向滾動條。也就是當咱們的視口展現不下內容的時候，會經過滾動條的方式讓用戶滾動屏幕看到剩餘的內容。

better-scroll 也是同樣的原理，以下圖，能夠更直觀的來感覺一下：

綠色部分爲 wrapper，也就是父容器，它會有固定的高度。黃色部分爲 content，它是父容器的第一個子元素，它的高度會隨着內容的大小而撐高。那麼，當 content 的高度不超過父容器的高度，是不能滾動的，而它一旦超過了父容器的高度，咱們就能夠滾動內容區了，這就是 better-scroll 的滾動原理。

注：在使用的時候外部容器的須要設置固定高度，還有一個問題須要設置overflow:hidden,這是由於爲了隱藏超出部分。
有一點須要特別注意：滾動的元素只能是第一個容器的第一個元素

better-scroll 的使用

例如：

經過npm引入

安裝better-scroll

npm install better-scroll

引入better-scroll

import BScroll from 'better-scroll'

若是不支持import，請使用require來引入

開始使用插件

DOM結構

<div class="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
</div>
複製代碼

wrapper裏只能有一層元素，也就是須要滾動的元素，使用了better-scroll以後，會自動在content加上動畫的樣式。

<!-- 這種結構是不能夠滾動的 -->
<div class="wrapper">
    <ul class="content">
      ...
    </ul>
    <ul class="content">
      ...
    </ul>
</div>
<!-- 若是須要滾動的話加一層div包裹着兩個ul標籤 -->
複製代碼

wrapper必定須要指定高度，否則是沒法滾動的。 須要看系統使用的定位是absolute仍是flex，若是是flex是有默認的高度的，就不須要本身手動設置wrapper的高度。

注：父級bscroll必須有高度，而且overflow爲hidden;

插件使用

mounted(){
    this.$nextTick(() => {
        let bscrollDom = this.$refs.bscroll;
        this.bscroll = new BScroll(bscrollDom,{ Option參數 }) //重點代碼
    })   
}
複製代碼

注：
1.插件初始化時須要具體元素，因此在DOM結構中使用ref標記元素(而後使用上面的代碼$refs獲取元素)，以備插件使用;
2.建議放在nextTick方法裏面，避免DOM結構未渲染完成,從而形成子元素bscroll-container高度計算不許確;
3.建議使用this.bscroll方式定義，以備在其餘方法中使用;
4.使用時必定要 new，使用時必定要 new，使用時必定要 new
重要的事情說三遍

Option 參數

• startX: 0 開始的X軸位置
• startY: 0 開始的Y軸位置
• scrollX: 'true' 滾動方向爲 X 軸
• scrollY: true 滾動方向爲 Y 軸
• click: true 是否派發click事件
• directionLockThreshold: 5
• momentum: true 當快速滑動時是否開啓滑動慣性
• bounce: true 是否啓用回彈動畫效果
• selectedIndex: 0 wheel 爲 true 時有效，表示被選中的 wheel 索引
• rotate: 25 wheel 爲 true 時有效，表示被選中的 wheel 每一層的旋轉角度
• wheel: false 該屬性是給 picker 組件使用的，普通的列表滾動不須要配置
• snap: false 該屬性是給 slider 組件使用的，普通的列表滾動不須要配置
• snapLoop: false 是否能夠無縫循環輪播
• snapThreshold: 0.1 用手指滑動時頁面可切換的閾值，大於這個閾值能夠滑動的下一頁
• snapSpeed: 400, 輪播圖切換的動畫時間
• swipeTime: 2500 swipe 持續時間
• bounceTime: 700 彈力動畫持續的毫秒數
• adjustTime: 400 wheel 爲 true 有用，調整停留位置的時間
• swipeBounceTime: 1200 swipe 回彈 時間
• deceleration: 0.001 滾動動量減速越大越快，建議不大於0.01
• momentumLimitTime: 300 符合慣性拖動的最大時間
• momentumLimitDistance: 15 符合慣性拖動的最小拖動距離
• resizePolling: 60 從新調整窗口大小時，從新計算better-scroll的時間間隔
• preventDefault: true 是否阻止默認事件
• preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認事件的例外配置
• HWCompositing: true 是否啓用硬件加速
• useTransition: true 是否使用CSS3的Transition屬性
• useTransform: true 是否使用CSS3的Transform屬性
• probeType: 1 會截流,只有在滾動結束的時候派發一個 scroll 事件。2在手指 move 的時候也會實時派發 scroll 事件，不會截流。 3除了手指 move 的時候派發scroll事件，在 swipe（手指迅速滑動一小段距離）的狀況下，列表會有一個長距離的滾動動畫，這個滾動的動畫過程當中也會實時派發滾動事件

Events 事件

例如：

let scroll = new BScroll(document.getElementById('wrapper'),{
   probeType: 3
})

scroll.on('scroll', (pos) => {
  console.log(pos.x + '~' + pos.y)
  ...
})
複製代碼

Events 列表

• beforeScrollStart - 滾動開始以前觸發
• scrollStart - 滾動開始時觸發
• scroll - 滾動時觸發
• scrollCancel - 取消滾動時觸發
• scrollEnd - 滾動結束時觸發
• touchend - 手指移開屏幕時觸發
• flick - 輕拂時觸發
• refresh - 當 better-scroll 刷新時觸發
• destroy - 銷燬 better-scroll 實例時觸發

方法

• scrollTo(x, y, time, easing)

滾動到某個位置，x,y 表明座標，time 表示動畫時間，easing 表示緩動函數

例如：

let scroll = new BScroll(document.getElementById('wrapper'))
scroll.scrollTo(0, 500)
...
複製代碼

• scrollToElement(el, time, offsetX, offsetY, easing)

滾動到某個元素，el（必填）表示 dom 元素，time 表示動畫時間，offsetX 和 offsetY 表示座標偏移量，easing 表示緩動函數

• refresh()

強制 scroll 從新計算，當 better-scroll 中的元素髮生變化的時候調用此方法。

• getCurrentPage()

當 snap 爲 true 時，獲取滾動的當前頁，返回的對象結構爲 {x, y, pageX, pageY}，其中 x,y 表明滾動橫向和縱向的位置；pageX，pageY 表示橫向和縱向的頁面索引

• goToPage(x, y, time, easing)

當 snap 爲 true，滾動到對應的頁面，x 表示橫向頁面索引，y 表示縱向頁面索引， time 表示動畫，easing 表示緩動函數

• enable()

啓用 better-scroll，默認開啓

• disable()

禁用 better-scroll

• destroy()

銷燬 better-scroll，解綁事件

那些年走過的坑

DOM相關

當 DOM 結構發生變化的時候務必要調用refresh()確保滾動的效果正常，從新渲染高度

還有就是我上面寫的DOM層級關係，wrapper裏面必定不能存在多個同級的標籤

content是否被成功添加滾動相關style

如下面dom結構爲例：

<div class="classifyTitle"  ref="wrapper">
	<ul>
	    <li v-for="(item,index) in classifyData.products">
		<router-link :to="{name:'詳情'}">{{item.title}}</router-link>
	    </li>
	</ul>				
</div>
複製代碼

審查元素能夠看到：

這樣即添加成功的

wrapper 與 content 高度問題

只有content的高度大於wrapper高度時候，才能夠滾動。

如何看？

this.$nextTick(() => {
    if (!this.scroll) {
	this.scroll = new BScroll(this.$refs.wrapper, {})
	console.log(this.scroll)
    }
 })
複製代碼

F12就能夠看到打印結果：

以上就是能夠滾動的狀況，wrapperHeight(616) < scrollHeight(750)，hasVerticalScroll爲true；

若是這些數據不對，檢查是否dom沒有更新完就初始化BScroll了，要等dom更新完才能初始化

wrapper 樣式

.wrapper元素上要給定位

position: absolute;
left: 0;
top: 0;
overflow: hidden;
複製代碼

---

^_<