微信小程序实现导航栏选项卡效果


Posted in Javascript onJune 19, 2020

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

效果图

微信小程序实现导航栏选项卡效果

WXML

<import src="../../template/list.wxml"/>

<view class="tui-tabbar-content">
 <view class="tui-tabbar-group">
 <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 #c8c7cc;}

JS

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

总结

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

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

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

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

Javascript 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
教你用jquery实现iframe自适应高度
Jun 11 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
微信小程序 动画的简单实例
Oct 12 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
什么是SOLID
Mar 24 Javascript
解析Vue.js中的组件
Feb 02 #Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 #Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 #Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 #Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 #Javascript
JS 实现百度搜索功能
Feb 01 #Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 #Javascript
You might like
PHP HTML代码串截取代码
2008/12/29 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
详解Python多线程下的list
2020/07/03 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
《老王》教学反思
2014/02/23 职场文书
大学校务公开实施方案
2014/03/31 职场文书
教师暑期培训感言
2014/08/15 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
禁毒心得体会范文
2016/01/15 职场文书