![cover](https://img-blog.csdnimg.cn/e369681565f246738d2ca85885dfd9b7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBANCAxNSAyMCAxQw==,size_12,color_FFFFFF,t_70,g_se,x_16)
利用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..
·
<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>
更多推荐
所有评论(0)