微信小程序页面内导航

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