微信小程序 實現(xiàn)tabs選項卡效果實例代碼
更新時間：2016年10月31日 10:45:22 投稿：lqh
這篇文章主要介紹了微信小程序 實現(xiàn)tabs選項卡效果實例代碼的相關資料,需要的朋友可以參考下
最近微信應用號是炒的如火如荼，熱門滿滿，但是也可以發(fā)現(xiàn)搜索關鍵詞出來，各類網(wǎng)站出現(xiàn)的還都是微信的官方文檔解釋。正好趕上這個熱潮，這幾天先把小程序技術文檔看了個遍，就直接著手寫案例了。很多組件微信內(nèi)部已經(jīng)封裝完了，正好發(fā)現(xiàn)沒有tab選項卡效果，這兩天正好研究了下。思路如下：
1、首先點擊導航的時候需要兩個變量，一個存儲當前點擊樣式類，一個是其它導航默認的樣式類
2、選項卡內(nèi)容列表同樣也需要兩個變量，一個存儲當前顯示塊，一個存儲的是其它隱藏的默認塊
3、使用三目運算通過點擊獲取導航索引，根據(jù)索引判斷是否添加當前類【備注，這里我將點擊事件綁定在父級導航欄，通過target對象得到點擊觸發(fā)的事件對象屬性】
請結合如下效果圖：
接下來直接查看源碼：
demo.wxml：
<view class="tab">
<view class="tab-left" bindtap="tabFun">
<view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view>
<view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view>
<view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view>
<view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view>
</view>
<view class="tab-right">
<view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view>
<view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view>
<view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view>
<view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view>
</view>
</view>
demo.js：
Page( {
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
},
tabFun: function(e){
//獲取觸發(fā)事件組件的dataset屬性
var _datasetId=e.target.dataset.id;
console.log("----"+_datasetId+"----");
var _obj={};
_obj.curHdIndex=_datasetId;
_obj.curBdIndex=_datasetId;
this.setData({
tabArr: _obj
});
},
onLoad: function( options ) {
alert( "------" );
}
});
demo.wxss：
.tab{
display: flex;
flex-direction: row;
}
.tab-left{
width: 200rpx;
line-height: 160%;
border-right: solid 1px gray;
}
.tab-left view{
border-bottom: solid 1px red;
}
.tab-left .active{
color: #f00;
}
.tab-right{
line-height: 160%;
}
.tab-right .right-item{
padding-left: 15rpx;
display: none;
}
.tab-right .right-item.active{
display: block;
}
最終演示效果如下：
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要介紹了微信小程序scroll-view組件詳細介紹的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了JavaScript原型鏈中函數(shù)和對象的理解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了JavaScript?設計模式之洋蔥模型原理及實踐應用，主要針對項目中遇到的問題，引申到koa-compose原理解析。通過學習洋蔥模式來解決我們實際項目中的問題2022-09-09
'2'>'10'==true?解析JS如何進行隱式類型轉(zhuǎn)換
這篇文章主要為大家介紹了'2'>'10'==true?解析JS如何進行隱式類型轉(zhuǎn)換示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家介紹了洋蔥模型?koa-compose源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了Javascript 跨域知識詳細介紹的相關資料,并附簡單實例代碼，幫助大家理解，需要的朋友可以參考下2016-10-10
字節(jié)飛書面試promise.all實現(xiàn)示例
這篇文章主要為大家介紹了字節(jié)飛書面試promise.all實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了javascript函數(shù)式編程，文章有介紹函數(shù)自核，聲明式和命令式代碼，感興趣的小伙伴可以一起來閱讀下面我文章內(nèi)容
2021-09-09 
這篇文章主要為大家介紹了uniapp自定義相機實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03