微信小程序（點擊添元素加Class篇）

常用的記錄一下

說一下思路

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;
}