小程序wx:for渲染实现动态切换样式

1.

<view class='appointent-date'>
 <view  class=" {{state==index?'':'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>

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

}

Page({
/**
4* 页面的初始数据
5 */
data: {
dates: [
  { "data_name": "11", "name": "廿四" },
  { "data_name": "12", "name": "廿五" },
  { "data_name": "13", "name": "廿六" },
  { "data_name": "14", "name": "廿七" }
],
state: ''
},
select_date: function (e) {
 console.log(e.currentTarget.dataset.key);
this.setData({
  state: e.currentTarget.dataset.key,
})
}
})
// 设置默认选中哪一个（不设置默认选中第一个，或者除第一个的所有）
defaultstate(){
  this.setData({
    state:this.data.bankdata.length+1
  })
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  this.defaultstate()
},

参考网址 https://blog.csdn.net/rolan1993/article/details/78709602