uni-app实现tab选项卡 -- [uni-app]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

uni-app实现tab选项卡

2020/9/27 16:09:39 字体:大中小浏览 5093

HTML

<view class="end-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" :class="{dis:btnnum == 0}">0信息</view>
<view class="end-cont" :class="{dis:btnnum == 1}">1信息</view>
<view class="end-cont" :class="{dis:btnnum == 2}">2信息</view>

CSS
/* 将三个内容view的display设置为none(隐藏) */
.end-title{display:flex;}
.end-title view{flex-grow:1;text-align:center;}
.end-cont{display:none;background:#C8C7CC;}
.btna{color:#FFFFFF;background:#00A0FF;}
.dis{display:block;}


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

HTML循环实现tab选项卡

html
<view class="end-title">
     <view v-for="(item,index) in items" :key="index" :class="{btna:count == index}" @tap="change(index)">
        {{item}}
    </view>
</view>
<view class="end-cont" :class="{dis:btnnum == 0}">0信息</view>
<view class="end-cont" :class="{dis:btnnum == 1}">1信息</view>
<view class="end-cont" :class="{dis:btnnum == 2}">2信息</view>

CSS同上
.end-title{display:flex;}
.end-title view{flex-grow:1;text-align:center;}
.end-cont{display:none;background:#C8C7CC;}
.btna{color:#FFFFFF;background:#00A0FF;}
.dis{display:block;}

js

data() {
   return {
      btnnum: 0,
      items:["基本信息","公告信息","换区信息"],
      count:"",
};
},
methods:{
change(e) {
     this.count = e
     this.btnnum = e
     console.log(this.count)
}
}

前一页:uni-app一个像商城分类中心一样的联动侧边栏导航分类

后一页:uni-app的父与子页面传递参数之属性Props字段类型讲解

相关阅读: 利用javascript仿的漂亮的flash效果的菜单; 利用CSS实现半透明效果兼容IE与火狐与chrome等浏览器; 中国签证行业领导者--亿诚出国签证网; asp利用hasOwnProperty验证某个json中的某个标签是否存在; javascript里confirm在外部文件中调用方法; 昌平欢乐之旅旅行社; 国内组团社旅游服务商建站解决方案; Web标准中XHTML的代码规范

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: uni-app开发表单input组件的一些规则说明自己预留使用; uni-app:使用uni.downloadFile下载word或pdf文件并保存到手机; 小程序中利用addPhoneContact将联系人的信息添加到手机通讯录支持保存联系人头像; 微信小程序打开客服提示：该小程序提供的服务出现故障，请稍后重试; 微信小程序客服会话只能过button让用户主动触发; uni-app开发微信小程序使用button的open-type为contact调用微信客服不能用view或者js调用

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 能坚持几秒？据说，美国空军的飞行员被强制达到2分钟！; 刘浏家俱; python+appium自动化测试-滑动; Visa签证服务商建站解决方案; 网页中自动换行问题; CSS中word-wrap属性同word-break属性的两者在中英文混排时的区别

更多标签热门标签

slectindext 键盘 table 网页文化 dt Cookie 破解变幻 rnd 结果 alert 类别 optgroup 图片上传高 Abandon 排序 hover 彩色优化选项文件大小首字母简易滑动提示禁止思考选项卡想 jpg overflow 配色滤镜调色关联 select Response 容器展示 checkbox xhtml IP 教程 ul 收缩人生 CSS滤镜名称