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

4 15 20 1C

已于 2023-12-29 14:49:14 修改

阅读量1.1w

点赞数 9

于 2022-04-07 14:07:12 首次发布

本文链接：https://blog.csdn.net/M40153c/article/details/124015017

版权

这篇博客展示了如何在Vue中利用`u-tabs`组件结合`v-if`指令动态显示不同的组件，如`All`、`Hot`、`Balls`等。通过设置`list`、`current`属性和`change`方法来控制组件的切换。同时，介绍了如何通过对象形式传递style属性自定义`u-tabs`的样式，包括背景色、宽度和内边距等。

摘要由CSDN通过智能技术生成

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