微信小程序實現選項卡功能
更新時間：2020年06月19日 15:01:07 作者：西江無月
這篇文章主要為大家詳細介紹了微信小程序實現選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序選項卡功能展示的具體代碼，供大家參考，具體內容如下
首先看看微信小程序上的選項卡的效果：
原理呢，就是先布局好（這就不必說了吧），然后在上面的每一個選項卡上都定義一個同樣的點擊事件，然后給每一個組件上綁定一個唯一的標識符，然后點擊事件觸發(fā)的時候，獲取到綁定的標識符，判斷當前點擊的是哪個選項卡，然后再判斷下面該顯示哪一塊，現在上代碼：
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
});
},
完結。
如果大家還想深入學習，可以點擊兩個精彩的專題：javascript選項卡操作方法匯總 jquery選項卡操作方法匯總
為大家推薦現在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了es6 filter() 數組過濾方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文通過實例代碼給大家介紹了js冒泡排序和選擇排序的實現代碼，代碼簡單易懂，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-09-09
小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法
在平常的項目開發(fā)中肯定會遇到同步異步執(zhí)行的問題，這篇文章主要介紹了小程序開發(fā)中如何使用async-await并封裝公共異步請求的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
JavaScript中Window對象stop()方法用于停止頁面載入,該方法類似在瀏覽器上點擊停止載入按鈕,如果頁面在載入圖片或框架(iframe)時間過長,我門可以使用該方法來停止載入,可以應用在判斷頁面載入時間,過長就不加載特效2023-09-09
這篇文章主要為大家詳細介紹了原生JavaScript輪播圖實現方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了JavaScript實現瀏覽器網頁的自動滾動并點擊的示例代碼，幫助大家更好的理解和學習JavaScript的使用，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了ES6新數據結構Map功能與用法,結合實例形式分析了Map的功能、使用方法及相關注意事項,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Js 獲取當前函數參數對象的實現代碼,需要的朋友可以參考下2016-06-06
Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標的位置、鼠標按鈕的狀態(tài)，Event對象的獲取方法如下，感興趣的朋友可以參考下2013-11-11
這篇文章主要介紹了JS實現文件動態(tài)順序載入的方法,實例分析了基于Mootools框架實現動態(tài)載入的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03