微信小程序 — 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文件。布局实现

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

    })

  },