写了个移动端可滑动（惯性滑动&回弹）Vue导航栏组件 ly-tab

本文转载于:猿2048网站➥https://www.mk2048.com/blog/blog.php?id=ia21hjjkhj

前段时间写了一个移动端的自适应滑动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

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

GitHub: github.com/ScoutYin AuthBy: ScoutYin