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

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

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

DEMO下载

效果图

WXML

已获得赏金

赏金在路上

邀请失败

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:seEIfDVyC 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进行切换！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。