【vue】自定义tab点击左右箭头可切换

效果图如图所示：

业务需求：自定义的tab切换，固定展示4个tab,可点击tab切换，想查看第五条数据或者更多数据，可以点击左右箭头 来回切换。切换时 当前高亮的tab也会根据左右箭头的切换而变。废话不多说 贴代码了

//html结构
   <div class="tab">
  		 //左按钮
      <div class="btn" @click.stop="left" v-if="!flagLeft">
        <img
          src="https://village.hb4oss.xstore.ctyun.cn/8c45ecce88424024a96f610504ff70d1.png"
          alt=""
        />
      </div>
      //tab内容
      <div class="tab_content">
        <div
          class="tab_item"
          v-for="(item, index) in tab"
          :key="index"
          :class="{ is_tab_item: isActive == index }"
          @click.stop="handleChangeTab(index, item)"
        >
          {{ item.bizEntityName }}
        </div>
      </div>
		//右按钮
      <div class="btn" @click.stop="right" v-if="!flagRight">
        <img
          src="https://village.hb4oss.xstore.ctyun.cn/2516271ce4554d6b838cb4cc17f3624a.png"
          alt=""
        />
      </div>
    </div>

data里定义的变量

  data() {
    return {
      numIndex: 3,
      flagLeft: false,
      flagRight: false,
      isActive: 0,
      tabList: [],//用来装后端返回的数据
      tab: [], //用来展示tab的
    };
  },
  created() {
    this.handleGetTabList();//调接口
  },

methods的方法

//请求街口数据
  handleGetTabList() {
      getBizEntityTab().then((res) => {
        if (res.code == 200) {
          this.tabList = res.data ? res.data : [];
          if (Array.isArray(res.data) && res.data.length > 4) {
            this.tab = this.tabList.slice(0, 4);
          } else {
            this.tab = res.data ? res.data : [];
            this.flagLeft = true;
            this.flagRight = true;
          }
          this.commonality();
          this.handleTabInfo(this.tab[0].bizEntityId);//用来查看tab详情的，与tab业务关系不大
        }
      });
    },
    //左箭头按钮
   left() {
      if (this.numIndex > 3) {
        this.tab.unshift(this.tabList[this.numIndex - 4]); //前面添加一个
        this.tab.pop(this.tab[this.numIndex]); //后面删除一个，此处的index因为前面添加了一个新数据的缘故，注意看是否为数组的最后一个数据
        this.numIndex--;
        this.handleTabInfo(this.tab[this.isActive].bizEntityId);
        this.commonality();
      }
    },
    //右箭头按钮
    right() {
      this.tab.shift(this.tab[this.numIndex - 3]); //前面删除一个
      this.tab.push(this.tabList[this.numIndex + 1]); //后面添加一个
      this.numIndex++;
      this.handleTabInfo(this.tab[this.isActive].bizEntityId);
      this.commonality();
    },
    //根据数据判断箭头是否隐藏
    commonality() {
      if (this.tabList[0].bizEntityId == this.tab[0].bizEntityId) {
        this.flagLeft = true;
      } else {
        this.flagLeft = false;
      }
      if (
        this.tabList[this.tabList.length - 1].bizEntityId ==
        this.tab[this.tab.length - 1].bizEntityId
      ) {
        this.flagRight = true;
      } else {
        this.flagRight = false;
      }
    },
    //tab切换
    handleChangeTab(index, item) {
      this.isActive = index;
      this.handleTabInfo(item.bizEntityId);
    },

css也贴了 仅供参考 哈哈

 .tab {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    .btn {
      cursor: pointer;
      width: 24px;
      height: 44px;
      margin: 0 5px;
      padding-top: 10px;
    }
    .tab_content {
      width: 600px;
      background-color: rgba(9, 29, 58, 76%);
      height: 44px;
      line-height: 44px;
      font-family: 微软雅黑;
      font-size: 12px;
      color: rgb(255, 255, 255);
      border-radius: 30px;
      display: flex;
      flex-wrap: wrap;
      // overflow: hidden;

      .tab_item {
        width: 150px;
        text-align: center;
        height: 100%;
        transition: all 0.3s linear 0s;
        transform: translate(0px, 0px);
      }

      .is_tab_item {
        font-weight: 800;
        background-image: url(https://easyv.dgcsite.com:10800/data/1/6571/img/bnfzl4ypfj_1680255401842_oyjz37erml.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }