微信小程序 — 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
 
    })
 
  },