溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
不懂微信小程序怎么實現選項卡功能？其實想解決這個問題也不難，下面讓小編帶著大家一起學習怎么去解決，希望大家閱讀完這篇文章后大所收獲。
首先看看微信小程序上的選項卡的效果：
原理呢，就是先布局好（這就不必說了吧），然后在上面的每一個選項卡上都定義一個同樣的點擊事件，然后給每一個組件上綁定一個唯一的標識符，然后點擊事件觸發的時候，獲取到綁定的標識符，判斷當前點擊的是哪個選項卡，然后再判斷下面該顯示哪一塊，現在上代碼：
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;//獲取到綁定的數據
//改變menuTapCurrent的值為當前選中的menu所綁定的數據
this.setData({
menuTapCurrent:current
});
},感謝你能夠認真閱讀完這篇文章，希望小編分享微信小程序怎么實現選項卡功能內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
