码迷,mamicode.com
首页 > 移动开发 > 详细

uniapp实现tab选项卡

时间:2019-11-27 12:37:35      阅读:1960      评论:0      收藏:0      [点我收藏+]

标签:round   console   title   隐藏   错误   tab选项卡   OLE   ffffff   back   

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

 

 

 

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

uniapp实现tab选项卡

标签:round   console   title   隐藏   错误   tab选项卡   OLE   ffffff   back   

原文地址:https://www.cnblogs.com/xhxdd/p/11941133.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!