close
当前位置: 物联网在线 > 技术文库 > ios >

微信小程序入门教程 - 列表渲染多层嵌套循环及wx:key的使用

入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉。

<view wx:for="{{items}}"> {{index}}: {{item.message}} </view>

还有一个九九乘法表把数据直接写到wxml里的,并不是动态二维数组的列表渲染。

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>

那么今天,我们主要来讲讲动态多维数组和对象混合的列表渲染。

微信小程序入门教程 - 列表渲染多层嵌套循环及wx:key的使用

讲解

何为多维数组和对象混合,给个很简单的例子

twoList:[{ id:1, name:'应季鲜果', count:1, twodata:[{ 'id':11, 'name':'鸡脆骨' },{ 'id':12, 'name':'鸡爪' }] },{ id:2, name:'精致糕点', count:6, twodata:[{ 'id':13, 'name':'羔羊排骨一条' },{ 'id':14, 'name':'微辣' }] }]

上述例子就是一个数组,这都是我们日常开发过程中,经常会碰到的JSON格式,

该数组的元素是有对象,对象又分为属性,属于数组对象混合,可能对于刚接触小程序的童鞋,碰到这种数组对象混合的就会发难了。

一层循环 oneList:[{ id:1, name:'应季鲜果', count:1 },{ id:2, name:'精致糕点', count:6 },{ id:3, name:'全球美食烘培原料', count:12 },{ id:4, name:'无辣不欢生猛海鲜', count:5 }]

以上数组对象混合JSON,是测试只有一层循环的,我们看看在 wxml 里怎么循环,我们先看一下要循环渲染到页面上的效果图。

微信小程序入门教程 - 列表渲染多层嵌套循环及wx:key的使用

<view wx:for="{{oneList}}"wx:key="id"> {{index+1}}、{{item.name}} </view>

我们可以看到,这里直接用两个花括号来给 view 循环列表,注意强调一下,请记得一下要用 两个花括号数据起来,如果不包起来, view 也会循环出来,但并不是自己要循环的数据,而且是给了一个假象给你以为是有循环了,这里开发工具有点坑人的感觉,这个还需要多细心点,这里记住一点,只要是有数据的,就需要花括号。

另外默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,同时我这里也顺道演示了如何使用数组变量名和下标。

二层循环

微信小程序入门教程 - 列表渲染多层嵌套循环及wx:key的使用

JSON代码

twoList:[{ id:1, name:'应季鲜果', count:1, twodata:[{ 'id':11, 'name':'鸡脆骨' },{ 'id':12, 'name':'鸡爪' }] },{ id:2, name:'精致糕点', count:6, twodata:[{ 'id':13, 'name':'羔羊排骨一条' },{ 'id':14, 'name':'微辣' }] },{ id:3, name:'全球美食烘培原料', count:12, twodata:[{ 'id':15, 'name':'秋刀鱼' },{ 'id':16, 'name':'锡箔纸金针菇' }] }]

wxml代码

<viewwx:for="{{twoList}}"wx:key="id"> <view> {{index+1}}、{{item.name}} </view> <view wx:for="{{item.twodata}}"wx:for-item="twodata"wx:key="id"> ----{{twodata.name}}---{{item.name}} </view> </view>

以上截图和代码是二层嵌套内容。

我们在wxml代码里,很明显的看到有两个 wx:for 的控制属性,在二层循环的JSON代码里,我们看每个单数组里还有一级数据 twodata ,这里是需要再循环渲染到页面上的,在第一层数据里,直接再循环 item.twodata 即可,请记得一定要带上花括号。

在第二层的循环里,建议把当前项的变量名改为其他,即在wxml代码里看到的 wx:for-item="twodata" ,因为默认的当前项的变量名为 item ,如果不改换其他的话,你是拿不到第一层循环的数据的,因为被第二层的变量名覆盖了。

所以我们在wxml代码里,在第二层循环时,可以看到还可以循环第一层的值,即 ------- 。

三层以上的多层循环

三层以上的多层的数组循环,在原理上同二层循环是一样的,能理解了二层数组循环,对于三层以及三层以上都能得心应用的。

需要注意的地方,那就是老生常谈的问题了,数据需要用花括号括起来,从第二层起,把默认的当前项的变量名改为其他,例如 wx:for-item="twodata" ,还有细心再细心。

wx:key唯一标识符

为什么会有 wx:key 的出现呢,官方给的解释是,如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容, switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。


(责任编辑:ioter)

用户喜欢...

为物联网程序存储器应用选择和使用正确的闪存技术

随着IoT节点变得越来越强大,处理需求可能会增加到需要完整的嵌入式操作系统(OS)(如Linux)才能正确管理所有运行任务的复杂性的水平。尽管将此代码存储在闪存microSDHC卡上很方便,但大...


匹配正确的ADC到应用程序

这是一个由数字电脑控制的模拟世界。因此,物联网(IoT)设备的设计人员需要将模拟值有效地转换为采样数字表示。虽然简单的答案看起来可能只是将模数转换器(ADC)放在前面,但不是所有...


如何快速将NFC功能添加到任何应用程序

为了满足对近场通信(NFC)能力日益增长的需求,开发人员被要求快速创建优化设计。传统方法的发展速度缓慢,因为设计人员面临诸如RF电路优化,NFC协议管理,功耗以及最小设计占用等挑战...


Raspberry Pi智能语音助手应用程序的快速原型开发

语音助手已经迅速成为一个重要的产品功能,这要归功于流行的基于智能语音的产品,如Amazon Echo和Google Home。虽然语音服务提供商为开发人员提供了应用程序编程接口(API)支持,所以他们不...


DFRobot的Arduino兼容BLE硬件解决方案,具有无线编程,智能应用程序控制,长通信范围和外围模块

DFRobot的Bluno系列与标准的Arduino引脚兼容,这意味着使用Arduino制作的任何项目都可以直接通过蓝牙轻松进行无线连接。所有Bluno板卡和模块都集成了板载BLE,提供无线编程,蓝牙HID,AT命令配置...


使用 Micro Python 快速开发基于实时微控制器的应用程序

实时嵌入式系统变得非常复杂,不仅要深入了解复杂的 32 位微控制器,还要了解传感器、算法、因特网协议以及各种不同的终端用户应用。随着开发周期缩短和功能增多,开发团队需要设法加...


C51单片机是怎么存储程序和数据的

初学51总是会有这样的疑问,从电脑下载程序到开发板后,程序去哪了? C51中,用户或应用程序,系统程序和数据都是存放在哪的? 51单片机从物理结构上,可分为片内,片外程序存储器,片...


程序员的十层楼

自西方文艺复兴以来,中国在自然科学方面落后西方很多,软件领域也不例外。当然现在中国的许多程序员们对此可能有许多不同的意见,有些人认为中国的程序员水平远落后于西方,有些则...


牧民用应用程序保护驯鹿,物联网立大功

驯鹿是圣诞佳节的必备角色,到处都可以看到驯鹿形状的头饰或装饰品,不少人也觉得相当温馨可爱,但这样的认知...


【活动】《MicroPython入门指南》正式出版了,进微信群一起交流!

第一本专门介绍MicroPython的中文图书《MicroPython入门指南》由电子工业出版社正式出版了。 《MicroPython入门指南》 作者:邵子扬 MicroPython是近年开源社区中最热门的项目之一,它功能强大,使...