微信小程序实现给循环列表点击添加类（单项和多项)

一、多项

wxml

<view class='appointent-date'>
     <view  class="appointent-date-div {{item.state==1?'active-tag':''}}" bindtap="select_date"  wx:for="{{dates}}" data-key='{{index}}'>
       <view class="flex-item" >
         <rich-text class='data_name'>{{item.data_name}}</rich-text>
         <rich-text>{{item.name}}</rich-text>
       </view>
     </view>  
   </view>

// index.js

Page({
  data: {
         dates: [
           { "data_name": "30", "name": "十三", "state": 0 },
           { "data_name": "1", "name": "十四", "state": 0 },
          { "data_name": "2", "name": "十五", "state": 0 },
          { "data_name": "3", "name": "十六", "state": 0 },
          { "data_name": "4", "name": "十七", "state": 0 },
          { "data_name": "5", "name": "十八", "state": 0 },
          { "data_name": "6", "name": "十九", "state": 0 },
          { "data_name": "7", "name": "二十", "state": 0 },
          { "data_name": "8", "name": "廿一", "state": 0 },
          { "data_name": "9", "name": "廿二", "state": 0 },
          { "data_name": "10", "name": "廿三", "state": 0 },
          { "data_name": "11", "name": "廿四", "state": 0 },
          { "data_name": "12", "name": "廿五", "state": 0 },
          { "data_name": "13", "name": "廿六", "state": 0 },
          { "data_name": "14", "name": "廿七", "state": 0 }
        ]
      },
      select_date:function(e){
         var index = e.currentTarget.dataset.key
         console.log(this.data.dates[index].state)
         if(this.data.dates[index].state == 1){
           this.data.dates[index].state = 0
         }else if(this.data.dates[index].state ==0){
            this.data.dates[index].state =1
         }
         this.setData({
           dates:this.data.dates
         })
      }
  
})

wxss

.appointent-date{
     padding:10rpx 30rpx 40rpx 30rpx;
     background: #fff;
     box-sizing: border-box;
   }
   .appointent-date-div{
     display:inline-block;
     width:20%;
     text-align: center;
    margin-top: 30rpx;
  }
  .flex-item{
    display: inline-block;
    width:96rpx;
    height: 88rpx;
    font-size: 26rpx;
    border:2rpx solid #999;
    text-align: center;
    border-radius: 10rpx;
    color: #999;
    cursor: pointer;
    line-height: 30rpx;
  }
  .data_name{
    font-size: 36rpx;
    line-height: 52rpx;
    
  }
  .active-tag .flex-item{
    background: #c8321e;
    color:#fff;  
    border:1rpx solid #fff;
  }

参考：https://zhuanlan.zhihu.com/p/31668354