基本信息

---

下载

文档摘要

---

微信小程序开发

北方工业大学

案例

列表渲染

案例描述

编写一个小程序，利用wx:for实现对数组、对象

以及字符串的列表渲染，利用wx:for-index和

wx:for-item实现对index和item的重命名，在block

中使用wx:for实现对多节点结构块的渲染。

实现效果

案例实现

电脑录屏

知识要点

在组件上使用wx:for控制属性绑定一个数组，

即可使用数组中各项的数据重复渲染该组件。

数组当前项的下标变量默认为index，数组当前

项的变量名默认为item。使用wx:for-item和

wx:for-index可以指定数组当前元素和元素下标。可

以将wx:for用在block/标签上，以渲染一个包含

多节点的结构块。

知识要点

如果列表元素位置会动态改变或者有新的元素添加，

并且希望列表中的项目保持自己的特征和状态，就

需要使用wx:key来指定列表中元素的唯一标识符。

使用wx:for的注意事项

当wx:for的值为字符串时，会将字符串解析成

字符数组。例如：

viewwx:for=array

等同于

viewwx:for={{[a,r,r,a,y]}}

注意事项

花括号和引号之间如果有空格，将最终被解析成

为字符串。

viewwx:for={{[1,2,3]}}

等同于

viewwx:for={{[1,2,3]+}}

案例

总结

知识要点

?利用wx:for对数组、对象和字符串进行

列表渲染的方法

?利用wx:for-index和wx:for-item修改数组

默认下标index和默认数组元素item的

方法

?在block标签中使用wx:for对多节点结构

块进行列表渲染的方法