uniapp实现tab选项卡

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

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

猜你喜欢

转载自www.cnblogs.com/xhxdd/p/11941133.html