微信小程序动态修改样式

---

前言

微信小程序动态修改样式：循环数组显示到页面，点击单独的按钮变换单独样式

一、wxml

<view class="fb_tips"
    wx:for="{{arr11}}" 
    wx:key="id" 
     >
        <text class="title_item  {{item.isActive?'active':''}} "
        bindtap="clickpp" data-index="{{index}}"
        >{{item.value}}</text>
        
    </view>

二、js

代码如下（示例）：

Page({
  data: {
    arr11:[
    {
      id: 0,
      value: "功能建议",
      isActive:false
    },{
      id: 1,
      value: "购买遇到问题",
      isActive:false
      
    },{
      id: 2,
      value: "性能问题",
      isActive:true
    },{
      id: 3,
      value: "其他",
      isActive:false
    }
  ]
  },
    clickpp(e) {
    // 页面data-index传进来的索引
    const index=e.currentTarget.dataset.index;
    // console.log(index);
    console.log(this.data.arr11[index].isActive);
    // 拼接字符串
    const isActive=`arr11[${index}].isActive`
    // 使用setData修改当行数据
    this.setData({
      [isActive]: !this.data.arr11[index].isActive
    })
    // 打印数据
    console.log(this.data.arr11[index].isActive);

  }
  })

三、wxss

 .fb_tips {
  display: flex;
  flex-wrap: wrap;
}
 .fb_tips text {
  width: 30%;
  padding: 10rpx;
  text-align: center;
  background-color: #fff;
  margin: 20rpx 10rpx;
}
 .fb_tips  .active{
  color:var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}