寫了個移動端可滑動（慣性滑動&回彈）Vue導航欄組件 ly-tab

前段時間寫了一個移動端的自適應滑動Vue導航欄組件，以爲有必定實用性，你們可能會用獲得（固然有些大佬本身寫得更好的話就不必啦），因而前兩天整理了一下，目前已經發布到npm和GitHub上了，點我到npm，點我到GitHub項目，有須要的同窗能夠在項目中npm install ly-tab -S 或者yarn add ly-tab使用，具體用法下面會講到。

好了，先看看效果吧

好的，開始廢話了，實習差很少3個月了，這段時間跟着導師大佬也有接觸過一些項目，也學到了很多東西，接觸到的項目基本都是移動端項目，並且框架主要用的是Vue。作過移動端或者用過移動端APP（呸，屁話）的同窗確定會發現不少時候都會有相似上面這種有滑動效果的tab導航欄，相信你們確定在掘金的首頁就看到過。

實現思路

當時的項目中剛好也有這種需求，因而我想偷個懶直接使用Mint-ui組件庫裏現成的tabbar和tab-item組件，github上看了下它的實現源碼發現只實現了切換功能但不能滑動，so，懶偷不了就只好本身寫咯。

其實單單實現tab切換功能是不難的，看mint-ui使用的實際上是v-model語法糖，就像下面這樣

<ly-tab v-model="selected">
    <ly-tab-item></ly-tab-item> </ly-tab> 複製代碼

下面是拆解v-model語法糖的實現

<ly-tab :value="selected" @input="selected = arguments[0]">
    <ly-tab-item></ly-tab-item> </ly-tab> 複製代碼

而後只須要在tab-item組件內實現當本身被點擊時，讓其父組件也就是ly-tab組件$emit一個input事件，並傳入一個標識每一個tab-item的惟一值做爲第一個參數，關於這個惟一值，mint-ui的作法須要用戶本身手動給每一個tab-item經過props傳入一個惟一的id值，以下爲Mint UI的Demo實現：

<mt-tabbar v-model="selected">
    <mt-tab-item id="訂單">
        <img slot="icon" src="http://placehold.it/100x100">
        <span slot="label">訂單</span>
    </mt-tab-item>
 </mt-tabbar>
複製代碼

可是，在看過大佬的vue當中設計Tabbar插件時的思考後以爲文章中的那種作法會更好一點，由於對於父組件<ly-tab/>來講，只要知道點擊的是哪一個<ly-tab-item/>就好了啊，那麼我把每一個<ly-tab-item/>組件的index索引值做爲它的惟一標識值不就好了嗎。

那麼問題來了：怎麼在tab-item組件內部取到本身的index值呢?

首先ly-tab組件的$children是一個數組，因爲每一個<ly-tab-item/>組件是依次建立並經過push的方式插入該數組，因此在每一個<ly-tab-item/>組件建立並push到$children時，對於<ly-tab-item/>組件來講(this.$parent.$children.length || 1) - 1不就是每一個<ly-tab-item/>組件惟一的index值了啊。實際上，到這裏點擊切換的功能就已經能夠實現了。下面貼上tab-item.vue中的代碼：

tab-item.vue

<template>
  <a class="ly-tab-item"
       :style="$parent.value === id ? activeStyle : {}"
       @click="$parent.$emit('input', id)">
    <div class="ly-tab-item-icon"><slot name="icon"></slot></div>
    <div class="ly-tab-item-label"><slot></slot></div>
  </a>
</template>

<script>
export default {
  name: 'LyTabItem',
  computed: {
    activeStyle () {
      return {
        color: this.$parent.activeColor,
        borderColor: this.$parent.activeColor,
        borderWidth: this.$parent.lineWidth,
        borderBottomStyle: 'solid'
      }
    }
  },
  data () {
    return {
      id: (this.$parent.$children.length || 1) - 1
    }
  }
}
</script>

<style lang="scss">
.ly-tab-item {
  text-decoration: none;
  text-align: center;
  .ly-tab-item-icon {
    margin: 0 auto 5px;
  }
  .ly-tab-item-label {
    margin: 0 auto 10px;
    line-height: 18px;
  }
}
</style>

複製代碼

關於tab.vue中觸摸滑動、慣性滑動以及回彈等效果實現的大體思路：

• this.$el監聽touchstart、touchmove和touchend事件；
• touchstart時記錄touch的初始位置startX(event.touches[0].clientX)，也就是觸點距屏幕左側的距離；
• touchmove時記錄此時touch位置currentX(event.touches[0].clinetX)，那麼從touchstart到這次touchmove或者上一次touchmove到該次touchmove手指的移動距離爲currentX - startX，而後讓內容區的translateX += currentX - startX使內容區跟隨手指移動，接着將currentX的值賦給startX做爲下一次touchmove計算的初始位置；
• touchmove時若是內容區超出邊界時將產生粘滯阻力，且超出邊界的距離越長粘滯阻力越大，

此時手指移動距離仍是currentX - startX,可是內容區要移動的距離須要稍加處理，首先可視區寬度（容器寬度）爲viewAraeWidth，此時超出邊界的距離爲outX，規定一個超出邊界最大可拖動距離additionalX，那麼內容區每次須要移動的距離爲additionalX * (currentX - startX) / (viewAreaWidth + outX)，能夠近似當作是一個數學函數y=a/(x+b)，a,b均爲常量，X是outX，其函數圖像大體爲：

也就是說當outX逐漸增大時，內容區要移動的距離將愈來愈小，這樣你就會發現越往這個方向拖越拖不動了。

• touchend時若是內容區已經超出邊界就讓其直接執行回彈（回彈過程動畫使用transition）；
• 若是沒有超出邊界，則計算silenceTime = touchend時的時間戳 - 最後一次touchmove觸發的時間戳，好比若是silenceTime大於100ms，就不會產生慣性滑動，不然將有一個慣性滑動，所以就須要計算鬆手時的初速度speed = 距離間隔 / 時間間隔, 這邊的距離間隔和時間間隔計算須要在touchmove時作一些操做，也就是須要在每次touchmove事件回調中記錄下在每次touchmove時的觸點位置和時間戳，並使用兩個中間變量分別保存上一次的觸點位置和時間戳，經過這樣賦值更新，就能獲取到最後兩次touchmove間距離間隔和時間間隔，那麼初速度就能夠得出了。
• 接着是一個慣性滑動的過程，思考：假設容器寬度足夠長（也就是說不會超出邊界產生回彈），那麼這個慣性滑動的過程應該是一個勻減速過程，直至速度減爲0，運用勻減速運動公式V2=V1-at，V2爲0，那麼加速度acceleration = speed / time，time表示這個過程持續多長時間，能夠由你本身決定。接着就可使用requestAnimationFrame在其異步回調中計算每一個動畫幀內容區應該移動的距離(vt/2,t取16.7ms)，經過遞歸調用從而實現慣性滑動的動畫，關於requestAnimationFrame能夠閱讀張鑫旭前輩的CSS3動畫那麼強，requestAnimationFrame還有毛線用？；
• 固然剛纔說的是最簡單的狀況，但正常狀況下容器寬度沒那麼長（也就是說慣性滑動時可能會超出邊界），那麼整個過程應該是：先勻減速（未超出邊界），而後超出邊界。在超出邊界的過程當中咱們但願看到的是跟以前超出邊界拖動過程差很少的動畫效果，也就是阻力愈來愈大，加速度愈來愈大的運動過程，那麼在這個過程須要在每一個requestAnimationFrame的回調函數中計算新的的加速度，在這裏我用了一個本身擬定的比例計算公式acceleration *= (reboundExponent + outX) / reboundExponent，而後計算speed和移動距離。當速度減至0時，中止遞歸，執行回彈動畫。

整個過程的大體思路是這樣的，還有一些具體的細節請看具體代碼。有興趣的小夥伴能夠到github上查看，點我去github查看項目，也能夠將代碼clone到本地查看，寫得很差的地方歡迎你們指正，若是以爲用得着或者可以幫到你們的話最好了，那也不妨點個star吧，哈哈......

哎哎哎，不對不對，怎麼就開始求star了，最重要的還沒講呢—— ly-tab怎麼使用呢？

如何使用 ly-tab

小夥伴們若是想使用ly-tab，須要在你的項目中經過npm或者yarn下載安裝：

npm install ly-tab -S
複製代碼

or

yarn add ly-tab
複製代碼

接着在main.js中全局引入：

import Vue from 'vue';
import LyTab from 'ly-tab';

Vue.use(LyTab);
複製代碼

以後你就能夠在你項目中任意使用<ly-tab></ly-tab>和<ly-tab-item></ly-tab-item>組件而不須要再次引入了

栗子

<ly-tab v-model="selected" fixBottom>
  <!-- selected是你本身定義的一個在data中用於存放當前tab-item的索引值的變量 -->
  <ly-tab-item v-for="(item, index) in tabList" :key="index">
    {{item.itemName}}
  </ly-tab-item>
</ly-tab>

複製代碼

上面的栗子其實只是tabbar的實現，你們項目中確定還須要作視圖區的切換，在這裏簡單說一下我目前的作法：

• 使用Vue-router作router-view的切換
• 使用動態組件（能夠配合異步組件使用）

我暫時的話好像只用過這兩種，不知道你們還有其餘什麼更好的方法，歡迎分享~

配置項

能夠給<ly-tab></ly-tab>組件傳入一些配置項以自定義你想要的效果

配置項	類型	描述	默認值
lineWidth	Number	fixBottom爲false時tabbar底部border-width	1px
activeColor	String	激活狀態下字體color以及border-bottom-color	red
fixBottom	Boolean	是否固定在視圖底部（爲true時不可滑動）	false
additionalX	Number	近似等於超出邊界時最大可拖動距離	50px
reBoundExponent	Number	慣性回彈指數(值越大，幅度越大，慣性回彈距離越長)	10
sensitivity	Number	慣性滑動時的靈敏度(值越小，阻力越大),可近似認爲手鬆開後速度減爲零所需時間	1000ms
reBoundingDuration	Number	回彈動畫duration	360ms

Tips

• <ly-tab></ly-tab>組件內內容區寬度最小寬度爲<ly-tab></ly-tab>組件的寬度
• 當<ly-tab></ly-tab>組件內內容區寬度大於自己時纔可滑動（自適應）
• 若是fixBottom爲true時，不可滑動

PS:

若是在安裝node-sass時報錯能夠先

npm uninstall node-sass
複製代碼

卸載以前安裝的node-sass，以防其不去從新下載，而後使用淘寶鏡像安裝

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
複製代碼

固然也能夠直接全局配置

npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
複製代碼

以後再涉及到node-sass的安裝就會直接從淘寶鏡像源下載了。

收穫與心得

從一開始只考慮到功能的實現，到除了實現功能而且儘可能去考慮組件的複用性和使用便捷性，而後提高代碼的質量和細節的優化等等，這一整個過程鍛鍊了我思考問題的能力，也積累了我對複用組件編寫的經驗，呃，而後......也很佩服本身能把這篇文章寫完，哈哈......寫的很差的地方，歡迎大佬們批評指正，最後，仍是想求點star呀... 算了算了，去github賞他一個star

tips （更新於2018/12/15）

這篇文章很久沒更新了，目前文章介紹的都是ly-tab最初的版本，該組件以後進行了一些bug修復和功能完善優化，更多的詳細改動以及新版本的使用方法歡迎到github查看哈😄

GitHub: github.com/ScoutYin AuthBy: ScoutYin