小程序入门连载十五之小程序列表渲染

上一篇文章讲解“小程序设置及获取数据”，本篇文章讲解“小程序列表渲染”。

1. wx:for

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

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

循环展示一个swiper（滑块视图容器）。

在界面层（wxml）中展示swiper（tst.wxml）

以下仅展示内容作为示例，可以展示图片等，展示图片只需在swiper-item标签下添加image标签即可。

编译预览：

在交互层（js）data中定义swiper展示的动态数据

将数据在界面层（wxml）中动态循环展示

编译预览：

注意：

1. 默认数组当前项的变量名默认为item，使用wx:for-item可以指定数组当前元素的变量名。

{}

2. wx:key

在编译预览时，在控制台会看到有一个警告。

现在，您可以为“wx:for”添加“wx:key”，以提高性能。

wx:key的作用：

例如循环渲染了很多数据，一个页面很长一屏幕展示不下，当向下看时，需要不断的渲染数据，需要与渲染过的数据做一个结合，wx:key的作用就是作为是否渲染过的标识，如果没用wx:key，无法辨别是否渲染过，数据从头开始渲染，如果页面数据多就会加载的很慢。

wx:key的值以两种形式提供：

1）字符串，代表在for循环的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变（如主键）。

2）保留关键字，*this代表在for循环中的item本身，这种表示需要item本身是一个唯一的字符串或者数字，如：当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

在界面层（wxml）添加wx:key，id作为key的值。

编译预览：

3. 索引——index

在tst.wxml中输出索引

编译预览：

注意：

1. 默认数组的当前项的下标变量名默认为index，使用wx:for-index可以指定数组当前下标的变量名：

{} : {}

2. 索引从0开始，也可以作为wx:key的值。

4. block标签

有时在展示数据时，只要数据，不需要标签，像在swiper-item标签上循环时，swiper-item标签也会生成，不需要展示标签时使用block标签。

在界面层使用block标签循环数据（tst.wxml）

编译预览：

关注卓象程序员，定期发布技术文章

下一篇文章讲解“全国物流查询+小程序API”