最近微信應用号是炒的如火如荼，熱門滿滿，但是也可以發現搜尋關鍵詞出來，各類網站出現的還都是微信的官方文檔解釋。正好趕上這個熱潮，這幾天先把小程式技術文檔看了個遍，就直接着手寫案例了。很多元件微信内部已經封裝完了，正好發現沒有tab頁籤效果，這兩天正好研究了下。思路如下：
1、首先點選導航的時候需要兩個變量，一個存儲目前點選樣式類，一個是其它導航預設的樣式類
2、頁籤内容清單同樣也需要兩個變量，一個存儲目前顯示塊，一個存儲的是其它隐藏的預設塊
3、使用三目運算通過點選擷取導航索引，根據索引判斷是否添加目前類【備注，這裡我将點選事件綁定在父級導航欄，通過target對象得到點選觸發的事件對象屬性】
請結合如下效果圖：
接下來直接檢視源碼：
demo.wxml：
tab-hd01
tab-hd01
tab-hd01
tab-hd01
tab-bd01
tab-bd02
tab-bd03
tab-bd04
demo.js：Page( {
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
},
tabFun: function(e){
//擷取觸發事件元件的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;
}
本文原創釋出php中文網，轉載請注明出處，感謝您的尊重！