微信小程式實現選項卡功能，微信小程式選項卡

小程式實現選項卡功能，小程式選項卡

本文執行個體為大家分享了小程式選項卡功能展示的具體代碼，供大家參考，具體內容如下

首先看看小程式上的選項卡的效果：

原理呢，就是先布局好（這就不必說了吧），然後在上面的每一個選項卡上都定義一個同樣的點擊事件，然後給每一個組件上綁定一個唯一的標識符，然後點擊事件觸發的時候，擷取到綁定的標識符，判斷當前點擊的是哪個選項卡，然後再判斷下面該顯示哪一塊，現在上代碼：

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 }); },

完結。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。