微信小程序中使用wx:for，循环中绑定点击事件，对数组进行渲染

微信小程序实际开发中，在for循环中，需要获取用户对那组数据进行了修改，使用了vue太久，微信小程序有点忘记了，查阅资料后也是很快熟悉起来，但是赋值过程中遇到了一些小问题，解决了，特此记录一下。
1、在for循环中使用switch开关，用户点击对应开关，需要将对应数组中checked改变状态

<switch style="zoom:.8;margin:30rpx 0 0 20rpx;"  type="switch" checked="{{item.checked}}" bindchange="listenerSwitch" data-index='{{index}}' />

使用‘data-’ 可以绑定对应用户点击的for循环中数组的下标，此处用data-index=’{{index}}'进行绑定。

listenerSwitch(event){var b = event.currentTarget.dataset.indexthis.setData({[`list_zidonghua[${b}].checked`]:!this.data.list_zidonghua[b].checked})console.log(this.data.list_zidonghua);},

此处event.currentTarget.dataset.index便是获取到wxml中所处理的数组下标，一开始直接赋值

this.setData({'list_zidonghua[${b}].checked':!this.data.list_zidonghua[b].checked
})

会报下面的错误

 Error: Only digits (0-9) can be put inside [] in the path string

查阅官方文档后修改为上述赋值，轻松解决。
官方文档：

微信小程序中使用wx:for，循环中绑定点击事件，对数组进行渲染相关推荐

微信小程序数据使用wx:for循环展示
在微信小程序开发过程中,常常会遇到循环数据一说,自己看了点,写了个demo体验下小程序的魅力 //音频数组 Page({ data: { items: [ //第一首 { name: 'I Am Yo ...
微信小程序swiper实现轮播图，可触发点击事件
实现微信小程序轮换图切换,点击获取图片url,获取当前位置 1.index.js Page({ data: { autoplay: true, dotsBoll: fa ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
微信小程序地理位置接口( wx.getLocation )申请方法
在平时我们在开发小程序时,难免会需要用到用户的地理位置信息的功能,微信小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( wx.getLocation ),是无法审核通过小程序的. ...
学习如何使用微信小程序的for和foreach循环遍历获得索引和数据
学习如何使用微信小程序的for和foreach循环遍历获得索引和数据 js文件中定义数组第一种for循环方法第二种for循环方法length 第三种forEach循环方法 js文件中定义数组 * ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
绑定bindchange事件的微信小程序swiper闪烁，抖动问题解决，（将微信小程序切换到后台一段时间，再打开微信小程序，会出现疯狂循环轮播，造成抖动现象）
绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象) 参考文章: (1)绑定bindchang ...

微信小程序中使用wx:for，循环中绑定点击事件，对数组进行渲染

微信小程序中使用wx:for，循环中绑定点击事件，对数组进行渲染相关推荐

最新文章

热门文章