您好,登錄后才能下訂單哦!
不懂微信小程序怎么實現選項卡功能?其實想解決這個問題也不難,下面讓小編帶著大家一起學習怎么去解決,希望大家閱讀完這篇文章后大所收獲。
首先看看微信小程序上的選項卡的效果:
原理呢,就是先布局好(這就不必說了吧),然后在上面的每一個選項卡上都定義一個同樣的點擊事件,然后給每一個組件上綁定一個唯一的標識符,然后點擊事件觸發的時候,獲取到綁定的標識符,判斷當前點擊的是哪個選項卡,然后再判斷下面該顯示哪一塊,現在上代碼:
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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。