锐客网

  1. 首页 > 睿知 > it技术 > >

uniapp实现tab选项卡

IT知识选项卡tab选项卡选项

花门楼前见秋草，岂能贫贱相看老。这篇文章主要讲述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; }

 
 
 
【uniapp实现tab选项卡】有错误请告诉我，我会及时改正，谢谢

    推荐阅读


    上一篇：APP调用微信支付

    下一篇：多字段特性及Mapping中配置自定义Analyzer