微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)MUI頂部選項(xiàng)卡的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
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' : ''}}">邀請(qǐng)失敗</text> </view> </view> <view class="tui-list-box {{index == 0 ? '' : 'tui-hide'}}"> <template wx:for="{{['選項(xiàng)卡一子選項(xiàng) - 1','選項(xiàng)卡一子選項(xiàng) - 2','選項(xiàng)卡一子選項(xiàng) - 3','選項(xiàng)卡一子選項(xiàng) - 4','選項(xiàng)卡一子選項(xiàng) - 5','選項(xiàng)卡一子選項(xiàng) - 6','選項(xiàng)卡一子選項(xiàng) - 7','選項(xiàng)卡一子選項(xiàng) - 8']}}" is="listNoneOnly" data="{{item}}"></template> </view> <view class="tui-list-box {{index == 1 ? '' : 'tui-hide'}}"> <template wx:for="{{['選項(xiàng)卡二子選項(xiàng) - 1','選項(xiàng)卡二子選項(xiàng) - 2','選項(xiàng)卡二子選項(xiàng) - 3','選項(xiàng)卡二子選項(xiàng) - 4','選項(xiàng)卡二子選項(xiàng) - 5']}}" is="listNoneOnly" data="{{item}}"></template> </view> <view class="tui-list-box {{index == 2 ? '' : 'tui-hide'}}"> <template wx:for="{{['選項(xiàng)卡三子選項(xiàng) - 1','選項(xiàng)卡三子選項(xiàng) - 2','選項(xiàng)卡三子選項(xiàng) - 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}) } })
總結(jié)
微信小程序的切換,采用的是對(duì)某一個(gè)值的判斷,來(lái)對(duì)列表和tab bar進(jìn)行切換!
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊兩個(gè)精彩的專題:javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序教程系列之設(shè)置標(biāo)題欄和導(dǎo)航欄(7)
- 微信小程序 開發(fā)之頂部導(dǎo)航欄實(shí)例代碼
- 詳解微信小程序設(shè)置底部導(dǎo)航欄目方法
- 微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問(wèn)題
- 微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
- 詳解微信小程序膠囊按鈕返回|首頁(yè)自定義導(dǎo)航欄功能
- 微信小程序頂部導(dǎo)航欄滑動(dòng)tab效果
- 微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型(附完整案例)
- 微信小程序?qū)崿F(xiàn)左側(cè)滑動(dòng)導(dǎo)航欄
- 微信小程序自定義底部導(dǎo)航欄組件
相關(guān)文章
js設(shè)置function參數(shù)默認(rèn)值(適合沒(méi)有傳參情況)
div+css模擬js信息框的類庫(kù)時(shí)遇到一個(gè)問(wèn)題當(dāng)沒(méi)有傳遞參數(shù)過(guò)去時(shí)自動(dòng)使用提示信息作為窗口標(biāo)題,具體的實(shí)現(xiàn)如下2014-02-02如何在TypeScript中正確的遍歷一個(gè)對(duì)象
在TypeScript里面,也會(huì)遇到需要遍歷對(duì)象的時(shí)候,下面這篇文章主要給大家介紹了關(guān)于如何在TypeScript中正確的遍歷一個(gè)對(duì)象的相關(guān)資料,需要的朋友可以參考下2022-03-03JavaScript的常見兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)
本篇文章只要是對(duì)JavaScript的常見兼容問(wèn)題及相關(guān)解決方法(chrome/IE/firefox)進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【八】框架功能總體界面介紹
這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【八】框架功能總體界面介紹 的相關(guān)資料,需要的朋友可以參考下2016-05-05