uniapp实现tab选项卡

Posted 2021-03-24 爱河h

<view class="end-cont-title">
　　<view @tap="change(0)" :class="{btna:btnnum == 0}">基本信息</view>
　　<view @tap="change(1)" :class="{btna:btnnum == 1}">公告信息</view>
　　<view @tap="change(2)" :class="{btna:btnnum == 2}">换区信息</view>
</view>
<view class="end-cont-notice" :class="{dis:btnnum == 0}">
　　0信息
</view>
<view class="end-cont-notice" :class="{dis:btnnum == 1}">
　　1信息
</view>
<view class="end-cont-area" :class="{dis:btnnum == 2}">
　　2信息
</view>

data() {
    return {
        btnnum: 0,
    };
},
methods:{
    change(e) {
        this.btnnum = e
        console.log(this.btnnum)
    }
},

将三个内容view的display设置为none(隐藏)
 .btna{                                            //选中时的样式
    color: #FFFFFF;
    background: #00A0FF;
}
.dis{                                               //选中时将内容显示出来
    display: block;
}        

 

 

 

有错误请告诉我，我会及时改正，谢谢