本文實例為大家分享了微信小程序選項卡功能展示的具體代碼，供大家參考，具體內容如下
首先看看微信小程序上的選項卡的效果：
原理呢，就是先布局好（這就不必說了吧），然后在上面的每一個選項卡上都定義一個同樣的點擊事件，然后給每一個組件上綁定一個唯一的標識符，然后點擊事件觸發的時候，獲取到綁定的標識符，判斷當前點擊的是哪個選項卡，然后再判斷下面該顯示哪一塊，現在上代碼：
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 }); },完結。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
