本文实例为大家分享了微信小程序实现MUI顶部选项卡的具体代码，供大家参考，具体内容如下
效果图
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 data-id="1" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 1 ? 'tui-active' : ''}}">赏金在路上
<text data-id="2" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 2 ? 'tui-active' : ''}}">邀请失败Box {{index == 0 ? '' : 'tui-hide'}}">
Box {{index == 1 ? '' : 'tui-hide'}}">
Box {{index == 2 ? '' : 'tui-hide'}}">
<view class="tui-tabbar-group">
<text data-id="0" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 0 ? 'tui-active' : ''}}">已获得赏金
<text data-id="1" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 1 ? 'tui-active' : ''}}">赏金在路上
<text data-id="2" bindtap="changeTabbar" class="tui-tabbar-cell {{index == 2 ? 'tui-active' : ''}}">邀请失败
WXSS
.tui-list-Box{border-top:1px solid #c8c7cc;}
JS
总结
微信小程序的切换，采用的是对某一个值的判断，来对列表和tab bar进行切换！
原文链接：https://www.f2er.com/weapp/33905.html