众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染。在此分享小程序里复杂数组的更新、删除、添加、拼接

初始数据

数组嵌套对象

data: {
cartList: [{ id: 1, goods: {id: 1, name: 'wechat'}, checked: true }, { id: 2, goods: {}, checked: false }, { id: 3, goods: {}, checked: true }]
},

索引部分删除

 let index = 2;
let cartList = this.data.cartList
cartList.splice(index, 1)
this.setData({
cartList: cartList
})

内部部分修改

只修改数据内某项里的某属性。但此方法对于有引用到被修改的数据的wxs不会刷新页面显示,尚未清楚是bug还是小程序本身就不支持。

let index = 2
let updateTodo = `cartList[${index}].checked`
this.setData({
[updateTodo]: true
})

用一个变量接收要修改的数组,修改好后再整体setData赋值,如果原数据很大的话可能会影响性能。

 let index = 2
let cartList = this.data.cartList;
cartList[index].checked = res.data.checked
this.setData({
cartList: cartList
})

添加、拼接

push和concat

 // push改变原数组
let newList= [{ id: 4, goods: {}, checked: true }, { id: 5, goods: {}, checked: false }}]
let cartList = this.data.cartList;
cartList.push(...newList);
this.setData({
cartList: cartList
}) // concat返回添加后的副本,并不会修改原有数组
let newList= [{ id: 4, goods: {}, checked: true }, { id: 5, goods: {}, checked: false }}]
let cartList = this.data.cartList;
this.setData({
cartList: cartList.concat(newList)
})

微信小程序setData复杂数组的更新、删除、添加、拼接的更多相关文章

  1. 微信小程序setdata修改数组或对象

    1.this.setdata修改数组的固定一项的值 changeItemInArr: function() { this.setData({ 'arr[0].text':'changed data' ...

  2. 微信小程序setData()对数组的操作

    对于setData普通数据类型而言,没什么讲究 但是对于数组而言,再直接修改一个完整的数组显得有些多余,首先写着不简易,其次效率很是滴. 比如 你都能觉得复杂,官方肯定是有对应的优化的. 官方demo ...

  3. 微信小程序常见问题集合(长期更新)

    最新更新: 新手跳坑系列:推荐阅读:<二十四>request:fail错误(含https解决方案)(真机预览问题 跳坑指南<七十>如何让微信小程序服务类目审核通过 跳坑六十九: ...

  4. 微信小程序 setData 的坑(转)

    最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text ...

  5. 微信小程序setData的使用,通过[...]进行动态key赋值

    首先先介绍一下微信小程序Page.prototype.setData(Object data, Function callback)的讲解: setData函数用于将数据从逻辑层发送到视图层(异步), ...

  6. 微信小程序 setData 如何修改动态数据?

    最近这段时间在写微信小程序,有一个页面需要动态修改 data 中的数据,而这里似乎是个坑. 1.正常修改 正常修改很简单,当触发 change 事件时,数据和页面都会同时发生改变.这个也不用多说,很简 ...

  7. 关于微信小程序爬虫关于token自动更新问题

    现在很多的app都很喜欢在微信或者支付宝的小程序内做开发,毕竟比较方便.安全.有流量.不需要再次下载app,好多人会因为加入你让他下载app他会扭头就走不用你的app,毕竟做类似产品的不是你一家. 之 ...

  8. 微信小程序实现给循环列表点击添加类(单项和多项)

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  9. 微信小程序中在swiper-item中遍历循环添加多个数据内容(微信小程序交流群:604788754)

    在小程序中为了实现一个<swiper-item>中添加多个内容重复的标签,那就需要使用wx:for循环.如果按小程序的简易教程,循环加在block中,而swiper-item放在里面.所有 ...

随机推荐

  1. QHDYZ模拟赛20191012

    今天信息处老师(并不是教练,基本等于机房看门大爷) (好吧老师其实很犇,软件什么的厉害的一批,只是不能带oi--) 跟我说:"xxj,过两天月考完了,可以在初赛前再整一次模拟赛,一天,三道题 ...

  2. 《Effective Java》 读书笔记(八)避免使用Finalizer和Cleaner机制

    Finalizer和Cleaner并不等同于C++中的析构函数,是不确定多久会被调用的,甚至有时候可能不会被调用,因此除了作为一个安全网或者终止非关键的本地资源,不应该在Finalizer或Clean ...

  3. CSPS_108

    二逼出题人写错T1题面&&写伪T3std祭

  4. 利用Nginx中的Upstream模块配置服务器负载均衡

    1. 前言 nginx有一个最大的功能就是可以实现服务器的负载均衡,本篇博文就利用nginx中的upstream模块来配置一个简单的负载均衡.关于nginx的安装和配置文件可以查阅博文:windows ...

  5. 使用客户机和主机做DNS服务正向解析及小问题解决

    1.下载yum包 命令:yum install bind-chroot 2.更改配置文件 在这里,要了解到主配置文件为:   /etc/named.conf 但是,为了避免经常修改主配置文件named ...

  6. flink 流式处理中如何集成mybatis框架

    flink 中自身虽然实现了大量的connectors,如下图所示,也实现了jdbc的connector,可以通过jdbc 去操作数据库,但是flink-jdbc包中对数据库的操作是以ROW来操作并且 ...

  7. 逻辑卷LVM

    1.理解LVM http://www.cnblogs.com/gaojun/archive/2012/08/22/2650229.html 2.创建LVM 根据“理解LVM”提供的原理思路搞 a)建立 ...

  8. python中的__str__和__repr__方法

    如果要把一个类的实例变成 str,就需要实现特殊方法__str__(): class A(object): def __init__(self,name,age): self.name=name se ...

  9. Python 之路 Day01 笔记-什么是变量,常量等

    变量 变量 是 为了存储 程序运算过程中的一些中间 结果,为了方便日后调用 变量的命名规则 1. 要具有描述性 2. 变量名只能'_','数字','字母'组成,不可以是空格或特殊字符(#?<., ...

  10. CSS如何设置列表样式属性,看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...