本文實例為大家分享了微信小程序實現(xiàn)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進行切換!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答