vue实现左右滑动tab

1.两个div，一个outer，一个inner，inner设置absolute，滑动时改变inner的left值

<div class="system-tabs">
      <i
        class="el-icon-arrow-left"
        style="left: 13%"
        @click="arrowClick('pre')"
      ></i>
      <i
        class="el-icon-arrow-right"
        style="right: 13%"
        @click="arrowClick('next')"
      ></i>
      <div class="scroll-outer" ref="scrollOuter">
        <div
          ref="scrollBody"
          class="scroll-body"
          :style="{ left: scrollLeft + 'px' }"
        >
          <span
            :class="{ item, active: tabIndex === index }"
            v-for="(item, index) in sysTabs"
            :key="index"
            @click="tabClick(index)"
          >
            {{ item.name}}
          </span>
        </div>
      </div>
    </div>

样式

&-tabs {
 height: 60px;
 background-color: #333333;
 box-sizing: border-box;
 position: relative;
 i {
   color: #999999;
   font-size: 28px;
   position: absolute;
   height: 60px;
   line-height: 60px;
 }
 .scroll-outer {
   position: absolute;
   left: 15%;
   right: 15%;
   top: 0;
   bottom: 0;
   overflow: hidden;
 }
 .scroll-body {
   height: 100%;
   position: absolute;
   overflow: visible;
   white-space: nowrap;
   -webkit-transition: left 0.3s ease;
   transition: left 0.3s ease;
 }

2.点击左右按钮时事件

arrowClick(type) {
      // 不需要滑动
      if (this.sysTabs.length <= 5) return;
      let outerWidth = this.$refs.scrollOuter.offsetWidth;
      let innerWidth = this.$refs.scrollBody.offsetWidth;
      if (type === "pre") {
        // 往前滑，滑动距离>0说明到最左
        if (this.scrollLeft >= 0) return;
        if (this.scrollLeft + parseInt(innerWidth / 10) > 0) {
          this.scrollLeft = 0;
        } else {
          this.scrollLeft += parseInt(innerWidth / 10);
        }
        this.tabIndex--;
      }
      if (type === "next") {
        // 往后滑，滑动距离>内部scroll宽度-外部scroll宽度，说明到最右
        if (this.tabIndex === this.sysTabs.length) return;
        if (-this.scrollLeft > innerWidth - outerWidth) return;
        if (
          -(this.scrollLeft - parseInt(innerWidth / 10)) >
          innerWidth - outerWidth
        ) {
          this.scrollLeft = -(innerWidth - outerWidth);
        } else {
          this.scrollLeft -= parseInt(innerWidth / 10);
        }
        this.tabIndex++;
      }
      this.getSysInfo();
    },

3.点击tab页时事件

tabClick(id) {
    if (id === this.tabIndex) return;
    let innerWidth = this.$refs.scrollBody.offsetWidth;
    let outerWidth = this.$refs.scrollOuter.offsetWidth;
    // 计算本次滑动距离
    let scrollWidth =
      parseInt(innerWidth / 10) * Math.abs(id - this.tabIndex);
    if (id > this.tabIndex) {
      // 往后滑
      if (this.scrollLeft - scrollWidth < innerWidth - outerWidth) {
        // 到最右边
        this.scrollLeft = -(innerWidth - outerWidth);
      } else {
        this.scrollLeft -= scrollWidth;
      }
    } else {
      // 往左滑
      if (this.scrollLeft + scrollWidth > 0) {
        // 到最左边
        this.scrollLeft = 0;
      } else {
        this.scrollLeft += scrollWidth;
      }
    }
    this.tabIndex = id;
    this.getSysInfo();
  }