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对象方法列表

【微信小程序】数组操作的更多相关文章

  1. 微信小程序-数组操作

    Page({ data: { list:[{ id:, name:'芒果', count: },{ id:, name:'香蕉', count: }, }] } }) 向前插入数据 //要增加的数组 ...

  2. 微信小程序相关操作

    显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...

  3. 微信小程序数组对象

    xml:<block wx:for="{{post_key}}" wx:for-item="{{item}}"></block> dat ...

  4. 微信小程序 数组索引 data-“”解释

    按照官方最新文档循环的方式,索引值是以  wx:for-index="index" 方式写的, 以   parseInt(event.currentTarget.dataset.i ...

  5. 微信小程序——动画操作时,rpx 和 px 的转换计算。

    嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.wind ...

  6. 微信小程序不可操作dom节点

    //根据历史记录快速搜索 fastSearch:function(e){ console.log(e.currentTarget.id) wx.navigateTo({ url: '../search ...

  7. 【微信小程序】认识微信小程序

    目前微信小程序已经支持个人版了 罗列一下微信开发的一些资料和工具 (如果你还不了解微信小程序如何操作请点击  新手教程 )里面罗列了 开发者工具 如何使用 和 微信的基本操作 很详细 一.微信开发者工 ...

  8. 微信小程序之换肤的功能

    pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...

  9. 微信小程序之数组操作:push与concat的区别

    微信小程序中需要用到数组的操作,push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(); arr.push(); arr.push([, ...

随机推荐

  1. Centos6.X安装桌面

    1.前置环境yum -y groupinstall 'X Window System'2.桌面安装 yum -y groupinstall 'Desktop' 3.语言包yum -y groupins ...

  2. 循环语句(for语句的用法)

    for语句是最常用的循环语句,出现频率极高,多用于各种循环计算.具体的形式如下:for(表达式1;表达式2;表达式3) {     语句;}表达式1:用于初始化变量,变量既可以是全局也可以是局部变量, ...

  3. Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )

    最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...

  4. 敏感、脆弱,OLED柔性屏会带给制造业怎样的灾难?

    智能手机市场已经有些意兴阑珊,大家创新的点子在过去十年逐一亮剑,也带来了一些革命,现在谈到智能手机硬件,只能是更大的屏幕.更大的电池,更高的摄像头像素等等,长期的创新乏力,已经让消费者失去" ...

  5. uniGUI之TUniHiddenPanel(14)

    TUniHiddenPanel是将不在界面上显示的  容器  控件.  只有uniDBGrid实际列才有对应的编辑控件,如果是外键列则无法设置 编辑控件. 里面的控件将不会 显示.将控件放入其中即可. ...

  6. 分析一次double强转float的翻车原因(转载)

    https://www.cnblogs.com/CoderAyu/p/11489577.html float只能保证7位有效数字. double d = 8345933; float f = (flo ...

  7. OC中四种遍历方式

    标准的C语言for循环.Objective-C 1.0出现的NSEnumerator.Objective-C 1.0出现的for in快速遍历.块遍历. 遍历的话,一般是NSArray.NSDicti ...

  8. XPath 和 CSS

    1.XPath XPath 即 XML 路径语言 (XML Path Language),他是一种用来确定 xml 文档中某部分位置的语言. xml文档(html 属于 xml)是由一系列节点构成的树 ...

  9. 吴裕雄--天生自然HADOOP操作实验学习笔记:pig简介

    实验目的 了解pig的该概念和原理 了解pig的思想和用途 了解pig与hadoop的关系 实验原理 1.Pig 相比Java的MapReduce API,Pig为大型数据集的处理提供了更高层次的抽象 ...

  10. 守神漏洞扫描器V1.2

    主界面 指纹利用 漏洞库 怎么说呢,个人感觉这个扫描器跟小哲的Test404Fuzzer差不多~ 就是功能多了旁站查询.C段查询.而且这款工具的exp比Test404Fuzzer的多了几个~ 总体来说 ...