微信小程序實現(xiàn)選項卡功能
更新時間：2020年06月19日 15:01:07 作者：西江無月
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序選項卡功能展示的具體代碼，供大家參考，具體內容如下
首先看看微信小程序上的選項卡的效果：
原理呢，就是先布局好（這就不必說了吧），然后在上面的每一個選項卡上都定義一個同樣的點擊事件，然后給每一個組件上綁定一個唯一的標識符，然后點擊事件觸發(fā)的時候，獲取到綁定的標識符，判斷當前點擊的是哪個選項卡，然后再判斷下面該顯示哪一塊，現(xiàn)在上代碼：
wxml:
<view class="menu_box">
<text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text>
<text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>
wxss:
.menu_box{
display: flex;
height: 80rpx;
}
.menu1,.menu2{
flex: 1;
font-size:30rpx;
line-height: 80rpx;
text-align: center;
}
.borders{
border-bottom: 4rpx solid #f00;
color: #f00;
}
.tab1,.tab2{
height: 300rpx;
background: #23bff3;
}
.tab2{
background: #ccc;
}
JS:
menuTap:function(e){
var current=e.currentTarget.dataset.current;//獲取到綁定的數(shù)據(jù)
//改變menuTapCurrent的值為當前選中的menu所綁定的數(shù)據(jù)
this.setData({
menuTapCurrent:current
});
},
完結。
如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
我們不管js或iframe怎么調用的，模擬點擊就意味著打開廣告鏈接，廣告商就以為用戶點擊了他的廣告，所以我們只要保證點擊了一個鏈接但沒有跳出頁面的結果就行了，是嗎？2010-01-01
這篇文章主要介紹了javascript跨域請求包裝函數(shù)與用法,結合實例形式分析了javascript基于ajax的跨域請求封裝函數(shù)與相關使用技巧,需要的朋友可以參考下2016-11-11
關于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法
這篇文章主要介紹了關于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧<BR>2019-06-06
自己剛寫的一個小程序，寫得滿一般的，不過這個接口還成，感興趣的朋友可以參考下哈，希望對你學習js知識有所幫助2013-04-04
本文給大家分享javascript封裝一個tab效果源碼分享，感興趣的朋友一起來看看吧2015-09-09
js中arguments,caller,callee,apply的用法小結
本篇文章只要是對js中arguments,caller,callee,apply的用法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
js中base64、url和blob之間相互轉換的3種方式(詳細代碼)
這篇文章主要給大家介紹了關于js中base64、url和blob之間相互轉換的3種方式,Blob和File是用來表示二進制數(shù)據(jù)的,而Base64則是一種編碼方式,用來把二進制數(shù)據(jù)編碼成可讀的字符串,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了微信小程序收藏功能的實現(xiàn)代碼,基本功能是點擊收藏后顯示已收藏，在另一個頁面出現(xiàn)目前點擊收藏的項目。需要的朋友可以參考下2018-06-06
最近寫一個關于用JavaScript做圖片自動切換問題發(fā)現(xiàn)一個非常奇特的問題，除了空格和換行外完全相同的代碼，在Firefox下卻有截然不同的運行結果，今天記錄以提供他人留意及自我備查。2010-11-11
JavaScript Base64編碼和解碼，實現(xiàn)URL參數(shù)傳遞。
JavaScript Base64編碼和解碼，實現(xiàn)URL參數(shù)傳遞。...2006-09-09