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

ScoutYin發表於2018-03-03
Vue元件

前段時間寫了一個移動端的自適應滑動Vue導航欄元件，覺得有一定實用性，大家可能會用得到（當然有些大佬自己寫得更好的話就沒必要啦），於是前兩天整理了一下，目前已經發布到npm和GitHub上了，點我到npm，點我到GitHub專案，有需要的同學可以在專案中npm install ly-tab -S 或者yarn add ly-tab使用，具體用法下面會講到。

好了，先看看效果吧

image

好的，開始廢話了，實習差不多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時如果內容區超出邊界時將產生粘滯阻力，且超出邊界的距離越長粘滯阻力越大，

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

此時手指移動距離還是currentX - startX,但是內容區要移動的距離需要稍加處理，首先可視區寬度（容器寬度）為viewAraeWidth，此時超出邊界的距離為outX，規定一個超出邊界最大可拖動距離additionalX，那麼內容區每次需要移動的距離為additionalX * (currentX - startX) / (viewAreaWidth + outX)，可以近似看成是一個數學函式y=a/(x+b)，a,b均為常量，X是outX，其函式影象大致為：

寫了個移動端可滑動（慣性滑動&回彈）Vue導航欄元件 ly-tab
也就是說當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

相關文章