介绍
小编给大家分享一下微信小程序中数组操作的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
前言
相信在小程序推出公测之后,很多小伙伴都已经抓紧申请注册小程序了。在开发阶段中也碰到了很多的问题,例如wx。请求数据请求不成功,在数组操作时,不知道如何往数组里推数据,输入如何监听用户输入的状态,css的背景图像无法获取本地资源等等。
数组操作
今天我们主要讲的是,数组操作。
相信对于用过vuejs, reactjs等mvvm框架的童鞋,微信小程序的数组操作就显得很简单啦,原理是一样的。
页面({
,,数据:{
,,,,,,,列表:[{
,,,,,,,,,
,,,,,,,名字:& # 39;应季鲜果& # 39;,
,,,,,,,数:1
,,,,,,,},{
,,,,,,,,,
,,,,,,,名字:& # 39;精致糕点& # 39;,
,,,,,,,数:6
,,,,,,,},{
,,,,,,,,,
,,,,,,,名字:& # 39;全球美食烘培原料& # 39;,
,,,,,,,数:12
,,,,,,,},{
,,,,,,,,,
,,,,,,,名字:& # 39;无辣不欢生猛海鲜& # 39;,
,,,,,,,数:5
,,,,,,,}]
,,}
})
我们初始化一些数据,我们需要对列表的添加新的数据里,需要用到JavaScript concat() <代码> 的方法,<代码> concat() 方法用于连接两个或多个数组,该方法不会改变现有的数组。
其实我们的所说的向前向后插入数据,其实也就是把两个数组合拼起来,组成一个新的数组,然后再使用<代码> this.setData() 即可渲染到页面上。
我们看一下在微信小程序里的代码。
<强>向前插入数据演示
,//向前增加数据
add_before才能:function () {//要增加的数组
var newarray =, [{
,,,,,
,,,的名字:& # 39;向前增加数据,& # 39;+ new 日期().getTime (),,
,,,数量:89
});//使用concat()来把两个数组合拼起来
时间=this.data.list newarray.concat (this.data.list);//将合拼之后的数据,发送到视图层,即渲染页面//大伙请记录,修改了数据后,一定要再次执行“this.setData()”,页面才会渲染数据的。
this.setData ({
,,,,,& # 39;列表# 39;:,,,this.data.list
,});
以前,,} <强>向后插入数据演示
,,//向后增加数据
add_after才能:function () {
,,,//要增加的数组
,,,var newarray =, [{
,,,,,,,,,,,,,
,,,,,,,,,,,名字:& # 39;向后增加数据,& # 39;+ new 日期().getTime (),,
,,,,,,,,,,,数量:89
,,,}];
,,,this.setData ({
,,,,,,,& # 39;列表# 39;:this.data.list.concat (newarray)
,,,});
,,}, 细心的小伙伴应该会发现,这两段在用<代码> concat() 合拼数据时,concat括号里的数据是不一样的。向前向后插入数据的区别就在这里了。
//假设这一段是我们要新增的数组
var newarray =, [{
,,,,,,,,,
,,,,,,,名字:& # 39;向后增加数据,& # 39;+ new 日期().getTime (),,
,,,,,,,数量: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); 修改数组
对展示的数据进行修改,在开发过程是常见得不在常见的事情啦。
,,//修改数组
编辑:才能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页面里使用,材料指数=皗{指数}}“传递过来的,是为识别正在编辑修改哪个数组。//我们要修改的数组
时间=(指数)this.data.list .name & # 39;修改了内容& # 39;+ new 日期().getTime ();//将合拼之后的数据,发送到视图层,即渲染页面//大伙请记录,修改了数据后,一定要再次执行“this.setData()”,页面才会渲染数据的。
this.setData ({
,,列表:this.data.list
});
,,}
