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