對 better-scroll 插件的基本封裝，實現(xiàn)移動端的滾動

better-scroll

probeType: better-scroll 配置項之一

（1）取值：
1 滾動的時候會派發(fā) scroll 事件，會截流。
2 滾動的時候?qū)崟r派發(fā) scroll 事件，不會截流。
3 除了實時派發(fā) scroll 事件，在 swipe 的情況下仍然能實時派發(fā) scroll 事件。
（2）默認值：1 

click: 點擊事件是否生效

refreshDelay: refresh事件的延遲時間

listenScroll: 是否監(jiān)聽滾動事件，如果監(jiān)聽滾動事件，則父組件應(yīng)當給自定義事件‘onscroll’綁定監(jiān)聽函數(shù)

data: 用于控制 scroll 刷新重新計算高度的數(shù)據(jù)

enable()

disable()

refresh()

scrollTo(x, y, time, [easing])

easing取值只能為 swipe/swipeBounce/bounce

scrollToElement(el, time, [offsetX], [offsetY], [easing])

offsetX，offsetY為number或true,true表示滾動到目標元素中心位置，數(shù)值則為設(shè)置滾動到目標元素的偏移量

在 mounted 鉤子中，在 $nextTick() 的回調(diào)中初始化 scroll 實例。
因為 scroll 實例初始化的時候必須保證其掛載對象（wrapper）的 DOM 已經(jīng)渲染完成，由于 wrapper 中的數(shù)據(jù)可能異步獲取的，因此必須放在 $nextTick() 中，獲取更新數(shù)據(jù)后的 DOM，進行高度計算

watch父組件傳入的數(shù)據(jù) data
DOM 上的數(shù)據(jù)發(fā)生了變化，要獲取更新后的 DOM ，在操作函數(shù)中同樣要在$nextTick（）的回調(diào)中進行 scroll 的刷新，refresh 重新計算高度。此處 setTimeout() 與 $nextTick() 作用相同。

父組件中 scroll 下內(nèi)容必須被包裹，不可出現(xiàn)如下結(jié)構(gòu)。

 
    

      ...
    
    

      ...
    

父組件對 srcoll 組件方法的調(diào)用、dom 的操作

 ... 

調(diào)用 scroll 中的方法：this.$refs.scrollName.methodName()
操作 dom（如改寫style）: this.$refs.scrollName.$el.style 

父組件引用 scroll 組件時 v-if 與 v-show 對其的影響

比如在 player.vue 組件中有如下結(jié)構(gòu)。子組件 scroll 處在含有 v-show 屬性來
控制顯示的元素中。

1.v-if 與 v-show 的區(qū)別：v-if 會適當銷毀和重建組件，且只有條件為真時才會進
行渲染。v-show 則在整個父組件創(chuàng)建時就渲染，只是根據(jù)條件改寫元素的 css 屬性
 display 的值來控制顯示與否。
 
2.當 scroll 在 v-show 控制的元素中時，必須額外在顯示條件為 true 時手動調(diào)用
 scroll.refresh() 刷新 scroll 重新計算其高度。
 
3.當 scroll 在 v-if 控制的元素中時，則無須手動刷新，因為 scroll 組件會被重
新創(chuàng)建，scroll 內(nèi)部的 mounted 鉤子的初始化及其對 data 的 watch 操作會自動
準確更新高度，實現(xiàn)滾動。

4.在 player.vue 中，由于全屏播放器和迷你播放器會被頻繁切換，而初始化代價也
并不是很大，所以使用 v-show 控制顯示，另外 watch player.isFullpage 的值來
手動刷新 scroll 即可。

// 全屏顯示的播放器
 

    ...
    // 歌詞部分，可滾動
    // lyricData是在組件mounted時后臺獲取的
    
        ...
    
 
// 迷你顯示的播放器
 

    ...
 

// js 部分 watch 代碼
 watch: {
      "player.isFullpage": function (newFlag) {
        if (newFlag) {
          this.$nextTick(() => {
            this.$refs.lyricScroll.refresh()
          })
        },
       ...
    }

-父組件與 scroll 組件之間 touch 系列事件同時觸發(fā)的問題

如在 player.vue 中，音樂播放器 CD 頁面和歌詞頁是左右滑動切換顯示的，封裝成
了 fade-slider 組件來控制頁面切換，在 fade-slider 中監(jiān)聽 touch 系列事件來
控制左右滑動，而scroll 組件在歌詞頁面中使用，監(jiān)聽 onscroll 事件控制歌詞滑動
上下切換，scroll 與 fade-slier 是父子關(guān)系，因此直接綁定事件時，冒泡過程中
二者的 touch 系列事件會同時被觸發(fā)。為了實現(xiàn)需求，即頁面左右滑動時 scroll 禁
止?jié)L動，scroll 上下滾動時 fade-slider 也不要左右切換，必須做相應(yīng)的處理。如
下代碼：

// player.vue 組件片段
  
    

     ...
    
    

       ...
       // 監(jiān)聽 scroll 的滾動事件，此處主要是上下滾動
        
          ...
        
    
  

// fade-slider 組件的 template 部分

1.要在歌詞頁面上下滑動歌詞時，即在 scroll 上下滾動時，使歌詞頁面
（fade-slider組件的中一個頁面）不要左右滑動，很簡單，在 fade-slider 的
 touch 系列事件中對 touch 的位置和方向進行判斷即可。

2.反過來，要在 fade-slider 控制歌詞頁面左右滑動時，使歌詞頁面中的 scroll 
不要上下滑動，因為它是封裝出來的 onscroll 事件，不能直接對 touch 的位置和方
向進行判斷，而另外去監(jiān)聽它的 touch 系列事件雖然也可以處理問題，但顯然不合
適，不僅邏輯重復(fù)，而且組件與 DOM 的耦合性也過高，不合適。

3.因而，當前問題就是要在父組件的 touch 過程中，滿足一定條件時去阻止子組件
的 scroll 事件的觸發(fā)，顯然在冒泡過程中難以做到，因此解決方案：

（1）fade-slider組件（父組件）中捕獲綁定 touch 系列事件：如 @touchstart.capture="onTouchStart"
（2）在 touch 系列事件處理過程中，控制當確定是左右滑動行為時，阻止 touch 系
列事件的傳播：e.stopPropagation()，這樣，scroll 中的滾動就不會被觸發(fā)。

4.因此，總的邏輯就是：

（1）touch 系列事件第一時間由父組件捕獲，進行 touch 行為的判斷
（2）如果是左右滑動，則切換頁面，同時阻止 touch 事件的進一步傳遞
（3）如果是上下滑動，則不做處理，使子組件的 touch 系列事件（scroll的內(nèi)部）被觸發(fā)，進行處理。

如下圖：在歌詞頁面中，歌詞即使用 scroll 組件，在音樂播放過程中，歌詞會自動播放，即根據(jù)當前音樂所對應(yīng)的歌詞，來 scrollToElement ,而在此過程中，仍然接受 touch 行為，當由 touch 引起滾動時，暫停歌詞的自動播放，并顯示歌詞控制條，同時根據(jù)滾動的距離高亮對應(yīng)的歌詞。歌詞控制條分兩部分：左側(cè)顯示當前滾動到的歌詞對應(yīng)的音樂的時間，右側(cè)顯示播放按鈕，點擊則直接播放此刻的音樂，歌詞也隨之重新定位

圖1：自動播放滾動時歌詞控制條不顯示，且高亮的歌詞是當前音樂的進度對應(yīng)的歌詞

圖2：touch 引起滾動時，歌詞暫停播放（音樂播放狀依舊不變），歌詞控制條顯示，當前高亮歌詞由當前滾動到的位置決定

首先在滾動過程中高亮的歌詞以及歌詞控制條上顯示的對應(yīng)的時間，顯然是要通過 onscroll 判斷，所以問題就在于如何在滾動過程中合理有效的區(qū)分是自動播放的滾動還是 touch 引起的滾動。

在確認是 touch 行為引起 scroll 滾動的前提下，大致要有三個階段，做不同的事情

（1）scrollStart階段：顯示歌詞控制條，停止歌詞的自動滾動
（2）onScroll階段：不斷根據(jù)當前滾動的偏移量更新高亮的歌詞，以及對應(yīng)的時間
（3）scrollEnd階段：滾動結(jié)束后，設(shè)置一定時間（如 1s）后，隱藏歌詞控制條，恢復(fù)之前的播放狀態(tài)
（4）在以上階段的任何時刻，一旦歌詞控制條上的播放按鈕被點擊，都立即隱藏歌詞控制條，并更新播放狀態(tài)

總的來說，核心內(nèi)容涉及到 touchStart、scrollStart、onScroll、scrollEnd四個事件，重點是這些事件的觸發(fā)順序，以及滾動慣性的問題

（一） 初步實現(xiàn)

（1）scroll 組件中已經(jīng)綁定了并注冊了 ontouchStart,onscrollStart,onscroll,onscrollEnd事件（代碼見第一章），
在父組件中直接傳入相應(yīng)值并監(jiān)聽事件即可
（2）設(shè)置 touch標志，用來區(qū)分是否是自動滾動。在 touchStart 中
置其為 true，在 scrollEnd 置其為 false。之所以用 scrollEnd 作為結(jié)束時機而
不用 touchEnd 也是由于滾動慣性
（3）因此，自動滾動和 touch 滾動的處理流程分別如下圖：   

（二） 慣性過程中 touch 引起的 bug 修復(fù)

    初步實現(xiàn)中的流程基本已經(jīng)可以實現(xiàn)需求，touch 的標志已經(jīng)可以控制區(qū)分自動
滾動和touch 滾動，但是會發(fā)現(xiàn)如果在 scroll 的慣性滾動中，再次 touch 屏幕，
則慣性滾動會停止，但 scroll 系列事件會不再起作用，高亮的歌詞與此時 touch 的
位置也不對應(yīng)，即在其系列事件中 touch 的標志被置為 false 了，而這顯然不是我
們想要的。
    touch 的標志之所以被置為了 false，是由 scrollEnd 的觸發(fā)導(dǎo)致的。在慣性
滾動過程中，touch 屏幕則會阻止慣性滾動，這是很明顯的現(xiàn)象，據(jù)此想一想，肯定是 
touch 導(dǎo)致了 scrollEnd 的提前觸發(fā)。即如下圖：

因此，除了 touch 標志之外，還需一個 end 標志來確定 scroll 系列流程是否被 touch 行為提前打斷。
1. 在 touchStart 中置 end 標志為 true
2. 在 scrollStart 中置 end 標志為 false
3. 在 scrollEnd 中置 end 標志為 true
4. 在 scrollEnd 中增加判斷，如果 end 標志為 true，則不置 touch 標志為 false

（三） touchStart、scrollStart、onscroll、scrollEnd 在 scroll 組件中注冊的區(qū)別

scrollStart、onscroll、scrollEnd 均是 better-scroll 中注冊的事件，使用時在 better-scroll 對象（new BetterScroll（））上 .on（事件名，處理函數(shù)） 監(jiān)聽即可

touchStart 是原生事件，在 scroll 組件中綁定在最外層元素上

Github: https://github.com/aphasic/mu...