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)

用户喜欢...

使用SPI XiP Flash扩展微控制器程序存储器的原因和方法

随着微控制器应用变得越来越复杂,开发人员正在为应用固件使用更多的Flash程序存储器对于开始执行相对复杂的边缘计算的物联网(IoT)端点尤其如此。但是,有时应用程序可以扩展到需要外...


如何快速安全地将物联网应用程序连接到Google Cloud

企业级云服务(如Google Cloud)为物联网开发人员提供了从可扩展虚拟机服务到交钥匙人工智能(AI)应用程序的各种功能。这些服务的基本要求是使用特定的安全方法来建立和维护物联网设备与...


Linux设备驱动程序开发:GPIO接口和设备树

GPIO接口和设备树 无论使用哪种接口都需要GPIO,如何指定GPIO取决于提供它们的控制器,特别是关于其#gpio-cells属性,它确定用于GPIO说明符的单元数。GPIO说明符至少包含控制器phandle和一个或多...


CMOS传感器通过Android应用程序检测慢性病

伦敦 - 格拉斯哥大学的研究人员开发出一种新设备,它将手持式CMOS传感器与基于Android的智能手机或平板电脑应用程序配对,以测量患者体液样本中各种代谢物的水平,从而可以简单检测慢性心...


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

随着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 位微控制器,还要了解传感器、算法、因特网协议以及各种不同的终端用户应用。随着开发周期缩短和功能增多,开发团队需要设法加...