小女子也是剛?cè)腴T微信小程式不久，發(fā)現(xiàn)微信內(nèi)部很多組件都已經(jīng)封裝好了，但是卻沒有tab選項(xiàng)卡效果的組件，最近正好需要用到，就研究了一下。整理出來供大家一起探討學(xué)習(xí)，哪裡有問題或可以改進(jìn)的地方，歡迎大家指點(diǎn)吐槽。

首先點(diǎn)擊導(dǎo)航的時(shí)候需要兩個(gè)變量，一個(gè)儲(chǔ)存目前點(diǎn)擊樣式類，一個(gè)是其它導(dǎo)航預(yù)設(shè)的樣式類

選項(xiàng)卡內(nèi)容列表同樣也需要兩個(gè)變量，一個(gè)儲(chǔ)存目前顯示區(qū)塊，一個(gè)儲(chǔ)存的是其它隱藏的預(yù)設(shè)區(qū)塊

使用三目運(yùn)算透過點(diǎn)擊取得導(dǎo)航索引，根據(jù)索引判斷是否新增目前類別【備註，這裡我將點(diǎn)選事件綁定在父級(jí)導(dǎo)覽欄，透過target物件得到點(diǎn)選觸發(fā)的事件物件屬性】

請(qǐng)結(jié)合如下效果圖：

##demo.wxml：

<blockquote><view class="tab">

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;  
}

?最終示範(fàn)效果如下：

#總結(jié)： Kagami_Tiger的原理是選取tab，就呼叫選取tab的內(nèi)容並隱藏其他tab內(nèi)容，當(dāng)然如果可以是把每個(gè)tab分類分別處於不同的頁面，然後每個(gè)tab一一對(duì)應(yīng)每個(gè)不同的頁面，那樣或許會(huì)更好。我沒有那麼開發(fā)過，也歡迎大家分享，互相學(xué)習(xí)舉一反三，才能一起進(jìn)步。

更多?微信小程式：如何實(shí)作tabs選項(xiàng)卡效果範(fàn)例相關(guān)文章請(qǐng)關(guān)注PHP中文網(wǎng)！

相關(guān)文章：

微信小程式tabs選項(xiàng)卡效果的實(shí)作

簡約時(shí)尚的純CSS3 Tabs選項(xiàng)卡特效

javascript實(shí)作tabs選項(xiàng)卡切換效果#