可多选,具体看需求哦!
具体流程就是给每个item增加一个判断true/false,然后通过动态class判断
<view class="insure_box">
<view class="insure_title">保险类型</view>
<view class="insure_body">
<view class="insure_item {{item.isSelect == true ? 'active' : ''}}" wx:for="{{insureTypeList}}" wx:key="index"
data-index="{{index}}"
catchtap="handleClickItem">{{item.type}}</view>
</view>
</view>
.insure_box {
padding: 32rpx;
box-sizing: border-box;
}
.insure_box .insure_body {
padding-top: 32rpx;
display: flex;
flex-wrap: wrap;
}
.insure_box .insure_title {
color: #989898;
}
.insure_box .insure_body .insure_item {
background: #F2F2F2;
color: #696969;
border-radius: 98rpx;
padding: 10rpx;
display: flex;
align-items: center;
font-size: 26rpx;
justify-content: space-around;
}
.insure_box .insure_body .insure_item{
margin-right: 20rpx;
}
data:{
insureTypeList:[
{
type:'平安保险',
isSelect:false
},
{
type:'人身保险',
isSelect:false
},
{
type:'太平洋保险',
isSelect:false
},
{
type:'中国人寿',
isSelect:false
},
]
},
handleClickItem(e){
let index = e.currentTarget.dataset.index
let insureTypeList = this.data.insureTypeList
insureTypeList[index].isSelect = !insureTypeList[index].isSelect
this.setData({
insureTypeList:insureTypeList
})
},