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

標籤瀏覽是 Internet Explorer 中的一項功能，可讓您在一個瀏覽器視窗中開啟多個網站。可以在新分頁中開啟網頁，並透過點選要查看的分頁切換這些網頁。透過使用標籤瀏覽，可以潛在地減少工作列上顯示的項目數量。本文我們就為大家分享微信小程式實作選項卡功能。

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

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

wxml:

<view class="menu_box">
 <text class=&#39;menu1 {{menuTapCurrent=="0"?"borders":""}}&#39; data-current="0" catchtap="menuTap">menu1</text>
 <text class=&#39;menu2 {{menuTapCurrent=="1"?"borders":""}}&#39; data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!=&#39;0&#39;}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!=&#39;1&#39;}}">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
 });


 },

相關推薦：

微信小程式機器人自動客服功能

#微信小程式-仿盒馬鮮生

####################### #微信小程式視頻，音樂，圖片組件詳解############微信小程式實作密碼輸入的實例############最完整的微信小程式項目實例######

以上是實現選項卡功能的微信小程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！