写了个移动端可滑动（惯性滑动&回弹）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