常用的记录一下
说一下思路
1、先给每个元素添加个id 和 状态
2、通过点击 修改对应id 下的状态 从而添加样式
效果图:
代码部分
wxml
<view class="label"> <view class="label-list {{item.isSelected ? 'active':''}}" wx:for="{{list}}" bindtap='itemSelected' data-index='{{index}}' wx:key="id">{{item.name}}</view> </view>
js
Page({ data: { list:[ { id: 1, name: '美食', isSelected: false, }, { id: 2, name: '运动健身', isSelected: false, }, { id: 3, name: '旅行', isSelected: false, }, { id: 4, name: '电影', isSelected: false, }, { id: 5, name: '音乐', isSelected: false, }, { id: 6, name: '阅读', isSelected: false, }, { id: 7, name: '时尚', isSelected: false, }, { id: 8, name: '科技', isSelected: false, }, { id: 9, name: '休闲娱乐', isSelected: false, }, { id: 10, name: '美食', isSelected: false, }, { id: 11, name: '摄影街拍', isSelected: false, }, { id: 12, name: '景点打卡', isSelected: false, }, ] }, itemSelected(e){ let index = e.target.dataset.index let temp_str = 'list['+index+'].isSelected'; console.log(); this.setData({ [temp_str]: !this.data.list[index].isSelected }); console.log(this.data.list) }, next(){ let id = [] this.data.list.map(res=>{ if(res.isSelected){ id.push(res.id) } }) wx.showToast({ title: '选中了'+id, icon: 'success', duration: 2000 }) } })
wxss
.label-btn{ margin: 0 105rpx; border-radius: 40rpx; padding: 14rpx 0; text-align: center; font-size: 28rpx; font-weight: 400; color: #FFF; } .label-btn.active{ background: #FF3D66; } .label{ display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; padding: 100rpx 35rpx; } .label-list{ background: #F7F7F7; border: 3rpx solid #F0F0F0; border-radius: 36rpx; padding: 10rpx 34rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 400; color: #404040; margin-bottom: 40rpx; } .label-list.active{ border: 3rpx solid #FF3D66; background: #FF3D66; color: #fff; }