<u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        bar-width="50"
        active-color="#30B1B7"
        @change="change"
      ></u-tabs>

下面是6个组件，用v-if来控制显示谁

      <view v-if="current == 0"> <All></All></view>
      <view v-if="current == 1"><Hot></Hot></view>
      <view v-if="current == 2"><Balls></Balls></view>
      <view v-if="current == 3"><Footwear></Footwear></view>
      <view v-if="current == 4"><ClassA></ClassA></view>
      <view v-if="current == 5"><ClassB></ClassB></view>

组件的引入就不写了

下面是分类命名

      list: [
        {
          name: "所有",
        },
        {
          name: "热销",
        },
        {
          name: "球类",
        },
        {
          name: "鞋类",
        },
        {
          name: "分类A",
        },
        {
          name: "分类B",
        },
      ],
        current: 0,

下面是方法

 methods: {
    change(index) {
      this.current = index.index;
      //如报错则用this.current = index代替上行
    },
}

以下是效果图，点击不同的按钮显示不同的组件

我们还可以通过对象的形式传入style，改变u-tabs的一些

样式

 <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        bar-width="80"
        active-color="#FFFFFF"
        @change="change"
        :style="{
          backgroundColor: '#5ac0cf',
          width: '750rpx',
          margin: '0 0 0 -20rpx',
        }"
      ></u-tabs>