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


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 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 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(5) 类和对象
2010/02/16 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
Javascript模板技术
2007/04/27 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
Django视图、传参和forms验证操作
2020/07/15 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
CSS3 边框效果
2019/11/04 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
机电一体化专业推荐信
2013/12/03 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
办公室管理规章制度
2015/08/04 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python