【微信小程序】数组操作
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([, ...
随机推荐
- centos 默认php 版本太低移到高版本的办法
// centos 默认有php 版本太低转移到高版本的解决办法 php -v 版本低 ln -s /usr/local/php/bin/php /usr/bin/php
- CURL_模拟登录
<?php $curl = curl_init(); $url = "http://www.imooc.com/user/login"; //$url = "htt ...
- ES5-json对象和字符串互转
JSON.stringify();和JSON.parse();是在ES5中提出并使用的:JSON.stringify();将一个对象转化为json字符串,JSON.parse();将一个对象转化为对象 ...
- c#能同时继承接口和类吗
c#能同时继承接口和类吗?( 要你命3000条12级分类:C#/.NET语言被浏览449次2013.09.10 满意答案 mroyal450 采纳率:54%12级 2013.09.11 C# 类, ...
- 任意promise串行执行算法 - 童彪
// 任意promise串行执行算法 - 童彪 function runAllPromise() { var p1 = new Promise((resove, reject) => { s ...
- Nodejs回调加超时限制两种实现方法
odejs回调加超时限制两种实现方法 Nodejs下的IO操作都是异步的,有时候异步请求返回太慢,不想无限等待回调怎么办呢?我们可以给回调函数加一个超时限制,到一定时间还没有回调就表示失败,继续后面的 ...
- 使用CSS3动画属性实现各种旋转跳跃
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...
- 按钮UIButton的使用
一.使用概要 当添加一个按钮到你的界面,执行以下步骤: 1.在创建时设置按钮的类型. 2.提供一个标题字符串或图像,为您的内容适当调整按钮的大小. 3.连接一个或多个操作按钮的方法. 4.设置自动布局 ...
- change事件和input事件的区别
input事件: input事件在输入框输入的时候回实时响应并触发 change事件: change事件在input失去焦点才会考虑触发,它的缺点是无法实时响应.与blur事件有着相似的功能,但与bl ...
- jquery的优点
轻量级 JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB. 强大的选择器 JQuery允 ...