先看一下示例：
实现思路主要就是三元运算符和数据绑定
wxml:
<!--pages/repair/repair.wxml-->
<view class='nav'>
<view class="nav_item {{tabid==1 ? 'sel':''}}" data-id='1' bindtap='tabChag'>未分配订单</view>
<view class="nav_item {{tabid==2 ? 'sel':''}}" data-id='2' bindtap='tabChag'>已分配订单</view>
</view>
<block wx:if="{{tabid==1}}">
1111111111
</block>
<block wx:if="{{tabid==2}}">
22222
</block>
css:
/* pages/repair/repair.wxss */
.nav{
font-size: 24rpx;
padding-left:30rpx;
padding-right: 30rpx;
display: flex;
justify-content: space-between;
}
.sel::after{
content: '';
margin: 0 auto;
display:block;
width: 80rpx;
height: 6rpx;
border-width: 30rpx;
border-bottom: 8rpx solid #4c8beb;
}
JS:
// pages/repair/repair.js
Page({
data: {
tabid:1
},
tabChag:function(e){
if (this.data.tabid == e.currentTarget.dataset.id){
return false;
}else{
this.setData({
tabid: e.currentTarget.dataset.id,
})
}
}
})
注意事项：
这里一定要用双括号抱起来，表示数据同步！
否则会tabid、2，会被认为是类型
还有就是:
这里一定要是双==，不然单=会被认为是赋值！
