记录基于vue的可滚动导航以及视图切换的实现

上一篇文章介绍了一个好用的组件ly-tab，可以用于滑动、自动定位的导航，但是无法配置图标，比如我想做成下面这种效果，就没有可以配置的选项，查看了改组件的文档发现，导航底部固定的时候无法滚动。
本来是想在源码的基础上改改的，但自己能力太薄弱，感觉不好改，于是我就借助作者写这个组件的思路，写了一个类似的功能出来，目前还没封装，也有一点小bug，不过已经满足了UI的需求了哈哈，下面看效果图。
看完下面的图，大概知道需要实现的功能有哪些：
1.导航栏中的item大于视图可见区域的时候可以滑动；
2.点击导航的时候切换视图；
3.置顶功能，将任意item置顶显示。
我们一个个来分析：
一 导航可以滑动：
这里需要注意，不是通过overflow-x:scroll来实现导航滑动，而是使用transform:translate;来实现
参考作者的思路：

• 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计算的初始位置；

此外作者还考虑了粘滞阻力，我没有考虑这点，效果可能没有那么好。
虽然没有考虑粘滞阻力，但是还是对用户可滑动的区域做了限制
部分页面结构代码

<template>
  <div>
    <div class="navbar-box">
      <ul
        ref="viewBox"
        @touchstart="touchStart($event)"
        @touchmove="touchMove($event)"
        @touchend="touchEnd($event)"
        :style="style"
      >
          <li v-for="(item,index) in tabs">
            <div
                 :key="index"
                 class="itembox"
                 @click="getC