移动端H5页面开发中，我们一般采用Vant组件库进行开发。有时候因为业务要求比较个性化，需要实现有自己产品风格的组件功能，这个时候在组件库的基础上进行修改是比较费时间的，反而自己动手实现组件功能，写样式比较快一些。
下面是Vant组件库的内容：

标签栏滚动
标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。

<van-tabs>
  <van-tab v-for="index in 8" :title="'标签 ' + index">
    内容 {{ index }}
  </van-tab>
</van-tabs>

效果如图：

这里是我用Vue实现Tab标签页组件的代码：

标签头列表

 <div class="switchBar">
      <div class="checked">
        <div
          class="checkedLi"
          v-for="(item, index) in helpIndex"
          :key="index"
          // 动态绑定class
          :class="{ active: index == isActive }"
          @click="changeHelpIndex(index)"
        >
          {{ item.typeName }}
        </div>
      </div>
    </div>

下面的问题列表

<div class="problem">
      <div
        class="paroblemLi"
        v-for="(item, index) in problemData"
        :key="index"
        @click="jumpDetail(item.id)"
      >
        <div class="itemLabel">
          {{ item.title }}
        </div>
        <img src="../../assets/img/service/tip.png" class="img" />
      </div>
    </div>

data(){
	return{
	// 默认选中的标签
      isActive: '0'
      }
	}

// 切换标签头
    changeHelpIndex (index) {
      this.isActive = index
    },

效果如下图:

 .switchBar {
    width: 100%;
    overflow-x: scroll;
    .checked {
      margin: 0 12px 0 0;
      display: flex;
      justify-content: flex-start;
      .checkedLi {
        margin: 12px 10px;
        white-space: nowrap;
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 15px;
      }
      .checkedLi:last-child {
        padding-right: 12px;
      }
      .active {
        color: #e02727;
        font-weight: 500;
      }
    }
  }
  .problem {
    width: 100%;
    padding: 0 12px;
    .paroblemLi {
      display: flex;
      justify-content: space-between;
      padding: 16px 0;
      border-bottom: 1px solid #f3f3f4;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 15px;
      .itemLabel {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .img {
      height: 16px;
      width: 16px;
      margin-right: 5px;
    }
  }