微信小程序 — tag标签设置选中效果和未选样式

 实现如上图效果 。选中效果和未选中效果实现。

1.wxss文件。设置css样式。选中效果样式和默认的效果样式。

stateChoose选中样式。  stateNotchoose未选中（默认）样式

.stateChoose {width: 206rpx;height: 62rpx;background: #f0f8ff;border: 1rpx solid #0281fe;border-radius: 10rpx;font-size: 28rpx;font-weight: 400;text-align: center;color: #0281fe;line-height: 62rpx;margin-top: 46rpx;
}.stateNotChoose {width: 206rpx;height: 62rpx;background: #ffffff;border: 1rpx solid #b3b3b3;border-radius: 10rpx;font-size: 28rpx;font-weight: 400;text-align: center;color: #333333;line-height: 62rpx;margin-top: 46rpx;
}

2.wxml文件。布局实现

<!-- popupwindow  全部条件 -->
<view class="show-popup" hidden="{{shaixuanStateHidden}}" bindtap="closePop"><view class="row bgWhite" style=" flex-wrap: wrap;" catchtap="catchTap"><block wx:for="{{shaixuanState}}" wx:key="index"><text class="{{index==checkedIndex?'stateChoose':'stateNotChoose'}}" bindtap="bindChooseState" data-index="{{index}}" style="margin-left: 32rpx;">{{item.name}}</text></block><view class="divideLine" style="margin-top: 48rpx;"></view><view class="row alItemCen" style="width: 100%;"><text class="textNor" style="flex-grow:1;text-align: center;" bindtap="resetState">重置</text><view class="line"></view><text class="textNor" style="flex-grow:1;text-align: center;" bindtap="confirmState">确定</text></view></view>
</view>

3.js文件，数据绑定。监听事件。

 data: {shaixuanState: [{"name": '全部',"invStatus": ""}, {"name": '未操作',"invStatus": "0"}, {"name": '操作中',"invStatus": "3"}, {"name": '已操作',"invStatus": "1"}, {"name": '已失效',"invStatus": "5"}, {"name": '提交失败',"invStatus": "2"}],checkedIndex: 0,shaixuanStateHidden: true,},

 

 closePop() {this.setData({shaixuanDataHidden: true,shaixuanStateHidden: true})},