前言

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

一、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;
}

微信小程序动态修改样式相关推荐

微信小程序动态修改头部title
微信小程序动态修改头部title 1,正常我们设置title的名字是这么设置的 {"navigationBarTitleText": "详情", } 2.在js ...
微信小程序动态修改页面标题title
背景有这样一个需求,想动态修改微信小程序页面顶部的标题,应该如何操作呢? 做法一.首先看看静态修改微信小程序页面顶部的标题的做法. 通过修改页面json文件即可修改页面标题 {"navi ...
微信小程序动态修改数据 list展示
前沿我想实现一个动态修改data内数据的功能,试验了几种方式,感觉下面的这种方式最实用,所以记录一下.方便后面的小伙伴来学习. 代码 js文件代码:Page({data: {artlist: []} ...
微信小程序动态修改颜色
在h5中可以用js根据id啊.class啊等等找到控件,然后.css 但是在小程序中没有,小程序是数据绑定的模式,style也可以这样写 1,在data中定义变量color data: {color: ...
微信小程序动态修改图片并将图片实时更新
适用范围:在处理含有多张图片上传/修改时如图:在数组中存在object类型的图片,我目标是进行修改ChapPicture[i].ChapPicture的值(动态绑定) 因此i是变量,需要从前端拿值: ...
微信小程序自定义修改swiper指示点样式
最近要用到微信小程序,于是就以CSDN的CSDN会员小程序作为练手案例,但是当我在使用官方的Swiper组件时发现,官方的指示点和我想要的效果不一致.于是,经过各种找资料,最终发现了解决方法. 官方的 ...
微信小程序-动态验证码
微信小程序-动态验证码一.创建自定义组件verification-code 二.在index页面使用一.创建自定义组件verification-code verification-code.js ...
学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
微信小程序动态添加view
微信小程序动态添加view //index.html<button bindtap='clickMe'> 添加</button> <input type='input' ...

微信小程序动态修改样式

前言

一、wxml

二、js

三、wxss

微信小程序动态修改样式相关推荐

最新文章

热门文章