微信小程式實現導覽列選項卡效果，小程式導覽列選項卡

小程式實現導覽列選項卡效果，小程式導覽列選項卡

本文執行個體為大家分享了小程式實現MUI頂部選項卡的具體代碼，供大家參考，具體內容如下

DEMO下載

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進行切換！

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。