小程序中的tab标签

小程序中的tab切换，控制下面的代码块的显示和隐藏

2018-03-22_174856.png

js部分

data: {
    currenttab:'0'
  },
  selectTab:function(e){
    //切换标签页
    console.log(e.currentTarget.dataset.tabid)
    var newtab=e.currentTarget.dataset.tabid;
    if(this.data.currenttab===newtab){
      return
    }else{
      this.setData({
        currenttab:newtab
      })
    }
  }

在data中设定一个currenttab变量，保存当前tab的状态；
再设定标签点击事件 selectTab，更新currenttab的值;
wxml部分

<!--pages/luntan/luntan.wxml-->
<!-- 标签栏tab -->
<view class="luntan_tab">
  <text class="{{currenttab==='0'?'tab_item_active':'tab_item'}}" data-tabid="0" bindtap='selectTab'>热门问答</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>

对于更复杂的tab标签，或者动态获取tab标签的情况，可以使用tabs[]数组保存tab内容，使用index来作为tab的索引值。