前言
微信小程序动态修改样式：循环数组显示到页面，点击单独的按钮变换单独样式文章来源：https://www.toymoban.com/news/detail-531137.html
一、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
代码如下（示例）：文章来源地址https://www.toymoban.com/news/detail-531137.html
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;
}
到了这里，关于微信小程序动态修改样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
