【微信小程序】数组操作
Page({
data: {
list:[{
id:1,
name:'应季鲜果',
count:1
},{
id:2,
name:'精致糕点',
count:6
},{
id:3,
name:'全球美食烘培原料',
count:12
},{
id:4,
name:'无辣不欢生猛海鲜',
count:5
}]
}
})
一、向前向后新增数组
//假设这一段是我们要新增的数组
var newarray = [{
id:5,
name:'向后增加数据--'+new Date().getTime() ,
count:89
}]; //向前--用newarray与this.data.list合拼
this.data.list = newarray.concat(this.data.list); //向后--用this.data.list与newarray合拼
this.data.list = this.data.list.concat(newarray); //页面渲染数据
this.setData({
'list': this.data.list
});
二、修改数组
//修改数组
edit:function (e){ //这个参数“e”的具体作用,请参考微信小程序官方提供的说明,地址为https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161107 var dataset = e.target.dataset;
var Index = dataset.index; //在通过在wxml页面里使用 data-index="{{index}}"传递过来的,是为识别正在编辑修改哪个数组。 //我们要修改的数组
this.data.list[Index].name = '修改了内容'+new Date().getTime(); //将合拼之后的数据,发送到视图层,即渲染页面
//大伙请记录,修改了数据后,一定要再次执行`this.setData()`,页面才会渲染数据的。
this.setData({
list:this.data.list
}); }
三、删除数据
//删除
remove:function (e){ var dataset = e.target.dataset;
var Index = dataset.index; //通过`index`识别要删除第几条数据,第二个数据为要删除的项目数量,通常为1
this.data.list.splice(Index,1); //渲染数据
this.setData({
list:this.data.list
});
}
四、清空数据
//清空
clear:function (){ //其实就是让数组变成一个空数组即可
this.setData({
list:{}
}); }
Array对象方法列表

【微信小程序】数组操作的更多相关文章
- 微信小程序-数组操作
Page({ data: { list:[{ id:, name:'芒果', count: },{ id:, name:'香蕉', count: }, }] } }) 向前插入数据 //要增加的数组 ...
- 微信小程序相关操作
显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...
- 微信小程序数组对象
xml:<block wx:for="{{post_key}}" wx:for-item="{{item}}"></block> dat ...
- 微信小程序 数组索引 data-“”解释
按照官方最新文档循环的方式,索引值是以 wx:for-index="index" 方式写的, 以 parseInt(event.currentTarget.dataset.i ...
- 微信小程序——动画操作时,rpx 和 px 的转换计算。
嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.wind ...
- 微信小程序不可操作dom节点
//根据历史记录快速搜索 fastSearch:function(e){ console.log(e.currentTarget.id) wx.navigateTo({ url: '../search ...
- 【微信小程序】认识微信小程序
目前微信小程序已经支持个人版了 罗列一下微信开发的一些资料和工具 (如果你还不了解微信小程序如何操作请点击 新手教程 )里面罗列了 开发者工具 如何使用 和 微信的基本操作 很详细 一.微信开发者工 ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- 微信小程序之数组操作:push与concat的区别
微信小程序中需要用到数组的操作,push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(); arr.push(); arr.push([, ...
随机推荐
- 对于使用javaweb技术制作简单管理系统的学习
近期在老师的引导下我们学习了利用Javaweb技术制作简单的管理系统,其中涉及到的技术很多,由于大多都是自学 对这些技术的理解还太浅显但能实现一些相关功能的雏形. (一).登录功能 在登陆功能中通过与 ...
- JDBC笔记一
连接池原理 数据库连接池:1.提前创建好多个连接对象,放到缓存中(集合),客户端用时直接从缓存中获取连接 ,用完连接后一定要还回来. 目的:提高数据库访问效率. 模拟代码: package com. ...
- python包管理历史
1.标准库工具distutils,2000年发布,是包安装和发布工具 setup.python 程序,利用distutils 开发 示例: python setup.py install 安装一个包 ...
- EC20的低功耗模式
EC20的支持以下几种工作模式,睡眠模式包括MCU主机睡眠和EC20睡眠. 当MCU主机不睡眠时,通过AT+QICSK =1(发送完之后串口被禁用不再响应AT指令),DTR=1(投票EC20可以进入睡 ...
- ASP.NET Core的身份认证框架IdentityServer4--入门
ASP.NET Core的身份认证框架IdentityServer4--入门 2018年08月11日 10:09:00 qq_42606051 阅读数 4002 https://blog.csdn ...
- 二、linux基础-路径和目录_用户管理_组_权限
2.1路径和目录1.相对路径:参照当前目录进行查找. 如:[root@localhost ~]# cd ../opt/hosts/备注:相对路径是从你的当前目录开始为基点,去寻找另外一个目录(或者 ...
- Periodic-table
1. Periodic table 1.1 元素的排列 1.2 表中的行与列 1.3 元素区块 1.4 周期表中的一些趋势 1.5 元素周期律的本质 1.6 电子排布 2. 更多相关链接 2.1 维基 ...
- Spark实验汇总(七个实验相结合)
日期:2020.01.20 博客期:128 星期一 一.环境搭建篇 1.安装虚拟机应用程序 VMware Workstation Pro [编写日期:2020-01-20] 去到 官网 下载 VMwa ...
- Design and History FAQ for Python3
Source : Design and History FAQ for Python3 Why is there no goto? 你可以通过异常来获得一个可以跨函数调用的 "goto 结构 ...
- MySQL实现主从复制功能
环境说明 centos7.3.MySQL5.7 前言 MySQL安装参考之前的文章https://www.jianshu.com/p/452aa99c7476有讲解. ...