啵啵奶糖的tab选项卡
HTML:
**<div>
<ul class='tabs'>
<li class='li-tab' v-for="(item,index) in lists"
@click="chageTab(index)"
:class='{active:index==nowIndex}'>
{{item}}
</li>
</ul>
<div class='divtab' v-show='nowIndex===0'>
我是tab1内容
</div>
<div class='divtab' v-show='nowIndex===0'>
我是tab2内容
</div>
<div class='divtab' v-show='nowIndex===0'>
我是tab3内容
</div>
</div>**
Script:
export default {
name: "fuwu",
data(){
return{
lists:['tab1','tab2','tab3'],
nowIndex:0, //默认第一个tab为激活状态
}
},
methods:{
chageTab:function(index){
this.nowIndex=index
},
}
}
CSS
<style>
.active{
border-bottom: 2rpx solid #2ca7fb;
width: 20rpx;
color: #2ca7fb;
}
.tabs{
position: fixed;
background: white;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 12vw;
margin: 0;
padding:0;
}
.li-tab{
flex: 1;
display: flex;
font-weight: 610;
justify-content: center;
align-items: center;
height: 100%;
}
.divTab{
width: 100%;
background: #efecec;
padding-top: 12vw;
height: 100vw;
}
}
</style>
来自一个菜鸟新手,希望对同样跟我是新手的大家有点帮助,大佬们不要见怪哈,感谢!