小程序转流应用教程_微信小程序完成导航栏选项

发布时间:2021-01-08 16:51 作者:jianzhan

摘要: 手机微信微信小程序完成导航栏栏选择项卡实际效果 本文关键为大伙儿详尽详细介绍了手机微信微信小程序完成导航栏栏选择项卡实际效果,原文中实例编码详细介绍的十分详尽

微信小程序实现导航栏选项卡效果       这篇文章主要为大家详细介绍了微信小程序实现导航栏选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现MUI顶部选项卡的具体代码,供大家参考,具体内容如下

效果图

WXML

 import src="../../template/list.wxml"/ 
 view 
 view 
 text data-id="0" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 0 'tui-active' : ''}}" 已获得赏金 /text 
 text data-id="1" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 1 'tui-active' : ''}}" 赏金在路上 /text 
 text data-id="2" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 2 'tui-active' : ''}}" 邀请失败 /text 
 /view 
 /view 
 view class="tui-list-box {{index == 0 '' : 'tui-hide'}}" 
 template wx:for="{{['选项卡一子选项 - 1','选项卡一子选项 - 2','选项卡一子选项 - 3','选项卡一子选项 - 4','选项卡一子选项 - 5','选项卡一子选项 - 6','选项卡一子选项 - 7','选项卡一子选项 - 8']}}" is="listNoneOnly" data="{{item}}" /template 
 /view 
 view class="tui-list-box {{index == 1 '' : 'tui-hide'}}" 
 template wx:for="{{['选项卡二子选项 - 1','选项卡二子选项 - 2','选项卡二子选项 - 3','选项卡二子选项 - 4','选项卡二子选项 - 5']}}" is="listNoneOnly" data="{{item}}" /template 
 /view 
 view class="tui-list-box {{index == 2 '' : 'tui-hide'}}" 
 template wx:for="{{['选项卡三子选项 - 1','选项卡三子选项 - 2','选项卡三子选项 - 3']}}" is="listNoneOnly" data="{{item}}" /template 
 /view 

WXSS

page{background-color: #efeff4;}
.tui-tabbar-content{
 padding: 10px;
.tui-tabbar-group{
 border: 1px solid #4cd964;
 border-radius: 3px;
 overflow: hidden;
 width: 100%;
 display: table;
 table-layout: fixed;
 color: #4cd964;
.tui-tabbar-cell{
 display: table-cell;
 width: 100%;
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 text-align: center;
.tui-tabbar-cell:not(:last-child){border-right: 1px solid #4cd964;}
.tui-tabbar-cell.tui-active{background-color: #4cd964;color: #fff;}
.tui-list-box{border-top:1px solid #;}

JS

Page({
 data: {
 index: 0
 changeTabbar(e){
 this.setData({ index: e.currentTarget.dataset.id})

总结

微信小程序的切换,采用的是对某一个值的判断,来对列表和tab bar进行切换!

如果大家还想深入学习,可以点击两个精彩的专题:

为大家推荐现在关注度比较高的微信小程序教程一篇:小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 多少资金可以正常运营一

    不考虑到开发设计成本费的前提条件下,能够零成本费经营

    看费用预算吧? 不一样的微信小程序资金投入不一样 大部分一个新客户大约0.5到N元的成本费

    更多就是过万,

  • “微人民法院”—借助微

    移动互联网网网阶段,依据“微老百姓人民法院”手机微信微信小程序,打官司不用跑老百姓人民法院,伸伸出手指即可以进行提起诉讼主题风格主题活动。五月26日,在2019在我国国际

  • 发布仅3周,这一腾迅项目

    很多人想开实体线店而不能,只不过是是倒在这里里个难点上:1. 都没有货,成本也不多,怎样办?大伙儿的答复是:大伙儿给你供货,但你甚至无需成本,因为你不起作用囤货——大

  • 一个人,一个月,开发十

    你是一条产品负责人,现如今要出一个大中小型规定的方案计划方案,你可以怎样做?没干了,找友商方案计划方案借(chao)鉴(xi)。干了,把以前的方案计划方案用于改一改。你是

  • 互连网商业保险企业的“

    已过冬疑剩,将来暖未饶。二零一三年,上海市市,清华大学高等院校光华楼,马云爸爸父亲穿着他钟爱的淡淡黄色毛线衣,腾迅透着“程序员风韵”,马志安還是一副金融业业圈哥哥