最近微信應用號是炒的如火如荼,熱門滿滿,但是也可以發(fā)現(xiàn)搜索關鍵詞出來,各類網(wǎng)站出現(xiàn)的還都是微信的官方文檔解釋。正好趕上這個熱潮,這幾天先把小程序技術文檔看了個遍,就直接著手寫案例了。很多組件微信內(nèi)部已經(jīng)封裝完了,正好發(fā)現(xiàn)沒有tab選項卡效果,這兩天正好研究了下。思路如下:
1、首先點擊導航的時候需要兩個變量,一個存儲當前點擊樣式類,一個是其它導航默認的樣式類
2、選項卡內(nèi)容列表同樣也需要兩個變量,一個存儲當前顯示塊,一個存儲的是其它隱藏的默認塊
3、使用三目運算通過點擊獲取導航索引,根據(jù)索引判斷是否添加當前類【備注,這里我將點擊事件綁定在父級導航欄,通過target對象得到點擊觸發(fā)的事件對象屬性】
請結(jié)合如下效果圖:
接下來直接查看源碼:
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;
-
}
最終演示效果如下:
以上僅是個人方案,如果有更好的方案,歡迎提出~