小程序中的tab切換，控制下面的代碼塊的顯示和隱藏

2018-03-22_174856.png

js部分

data: {
    currenttab:'0'
  },
  selectTab:function(e){
    //切換標(biāo)簽頁(yè)
    console.log(e.currentTarget.dataset.tabid)
    var newtab=e.currentTarget.dataset.tabid;
    if(this.data.currenttab===newtab){
      return
    }else{
      this.setData({
        currenttab:newtab
      })
    }
  }

在data中設(shè)定一個(gè)currenttab變量，保存當(dāng)前tab的狀態(tài)；
再設(shè)定標(biāo)簽點(diǎn)擊事件 selectTab，更新currenttab的值;
wxml部分

<!--pages/luntan/luntan.wxml-->
<!-- 標(biāo)簽欄tab -->
<view class="luntan_tab">
  <text class="{{currenttab==='0'?'tab_item_active':'tab_item'}}" data-tabid="0" bindtap='selectTab'>熱門問(wèn)答</text>
  <text class="{{currenttab==='1'?'tab_item_active':'tab_item'}}" data-tabid="1" bindtap='selectTab'>全部分類</text>
</view>

<!--熱門回答  -->
<view wx:if="{{currenttab==='0'}}">
   熱門回答部分
</view>

<!--全部分類 -->
<view wx:if="{{currenttab==='1'}}" >
  全部分類部分
</view>

對(duì)于更復(fù)雜的tab標(biāo)簽，或者動(dòng)態(tài)獲取tab標(biāo)簽的情況，可以使用tabs[]數(shù)組保存tab內(nèi)容，使用index來(lái)作為tab的索引值。