【微信小程序】数组操作
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([, ...
随机推荐
- leetCode练题——26. Remove Duplicates from Sorted Array
1.题目 26. Remove Duplicates from Sorted Array--Easy Given a sorted array nums, remove the duplicates ...
- 第六周之Hadoop学习(六)
继续上周开启telnet的过程,这个过程发现win10上运行不了telnet的命令 原因大概在于没有开启telnet服务,从网上下载好telent服务端,安装后继续尝试是否能在win10上使用hado ...
- vue学习笔记:数据渲染操作
{{xxx}} 基本的插值表达式 插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置 这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以 ...
- 使用pyinstaller打包.py程序
使用pyinstaller打包.py程序 例如打包D:/Desktop 目录下的 filename.py 文件 打开 cmd 将目录切换至 D:/Desktop 输入命令 pyinstaller -F ...
- 夯实Java基础(二十三)——Java8新特征之Stream API
1.Stream简介 Java8中除了引入了好用的Lambda表达式.Date API之外,另外还有一大亮点就是Stream API了,也是最值得所有Java开发人员学习的一个知识点,因为它的功能非常 ...
- STM32L152笔记
一 段式液晶初始化停在while(LCD_GetFlagStatus(LCD_FLAG_RDY) == RESET)中不出来,网上给的原因和解决办法: 1 也RTC的时钟有关,需要先配置RTC时钟 2 ...
- 搭建python虚拟环境virtualenv
virtualenv 是一个创建隔离Python环境的工具,创建虚拟环境运行,达到节省本地运行空间的目的. 安装vitualenv # pip install virtualenv 创建一个虚拟环境( ...
- CSS3-多列(column-count等)
CSS3 多列属性 属性 描述 column-count 指定元素应该被分割的列数. column-fill 指定如何填充列 column-gap 指定列与列之间的间隙 column-rule 所有 ...
- 新建Django 项目完整流程
1) 在桌面或者其他文件 新建项目名称 (mkdir 新建文件夹) 2)进入文件夹 pipenv --python3(用命令提示粘贴复制, 自己这样写经常有问题) 3) 启动虚拟环境 pipenv ...
- 哈希表,Java中的hashCode
哈希表: 将我们所需的键通过哈希函数转换索引,然后存储在一个数组中. 哈希表是时间和空间之间的平衡,体现空间换时间的算法思想(联想到预加载,缓存等,有时候多存储,预处理缓存一些东西,带来时间复杂度的改 ...