利用uView的u-tabs标签进行组件之间的切换

<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>