위챗 애플릿 페이지 내비게이션

wxml 페이지

<view class="navbar">
  <lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
    <text>{{item}}</text>
  </lable>
</view>
<view class="zhanwei"></view>
<!-- -->
<view hidden="{{currentTab!==0}}" >
  <view wx:if="{{list.length>0}}">
    <!--   -->
    <view class='cont_count' wx:for="{{list}}" wx:key="key" >
  
    </view>
  </view>
  <!--   -->
  <view wx:else>
    <!--   -->
    <view class='cont_count'>
 
      <label class='none_tab'> </label>
    </view>
  </view>
 
</view>
<!-- -->
<view hidden="{{currentTab!==1}}" >
  <view wx:if="{{list.length>0}}">
    <!--   -->
    <view class='cont_count' wx:for="{{list}}" wx:key="key" >
    
    </view>
  </view>
  <!--   -->
  <view wx:else>
    <!--   -->
    <view class='cont_count'>
 
      <label class='none_tab'> </label>
    </view>
  </view>
 
</view>

.js

data: {
    navbar: [' ', ' '],
    currentTab:0,
  },
  // tab 
  navbarTap: function (e) {
    var that = this;
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
    that.data.currentTab = e.currentTarget.dataset.idx
    console.log(e.currentTarget.dataset.idx)
    if (e.currentTarget.dataset.idx==0){
     
    
    }else{
     
    }
   
  },

wxss

.navbar{  
  display: flex;  
  background: #fff;  
  position: fixed;
  z-index: 9999;
  width: 100%
}  
.zhanwei{
  width: 100%;
  height: 86rpx;
}
.navbar .item{  
  position: relative;  
  flex: auto;  
  font-size: 27rpx;
  width: 100rpx;
  text-align: center;  
  line-height: 80rpx;  
  color:  #999999;
  border-bottom: 6rpx solid #ddd;
}  
/*   */
.navbar .item.active{  
  color: #5ABE64;  
  border-bottom: 6rpx solid #5ABE64;
  
}