小程序动态点击添加样式

数据是循环出来

//结构：
<view class="left">
      <view class="list-li" wx:for="{{listData}}"  wx:key="id" wx:for-item="item" @tap="listClick({{item}})">
        <text class="list-li-text {{selectId==item.id? 'list-li-text-active' : ''}}">{{item.name}}</text>
      </view>
</view>
//js:
data 中需要定义 selectId 
// listClick 点击事件
listClick(item) {
      this.selectId = item.id;
 }

//样式：
.list-li-text-active {     //点击时的样式
  border-left: 6rpx solid #00BC71;
  color: #00BC71;
  line-height: 100rpx;
  padding-left: 20rpx;
  font-size: 32rpx;
}
.list-li-text {
        line-height: 100rpx;
        padding-left: 20rpx;
        font-size: 32rpx;
}

注意：点击时判断id是否相等，相等则显示这个样式

喜欢吗？喜欢就留个小心吧！！！