列表渲染
-
wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。 -
手动指定索引和当前项的变量名*
- 使用 wx:for-index 可以指定当前循环项的索引的变量名
- 使用 wx:for-item 可以指定当前项的变量名
- 示例代码如下：
- wx:key 的使用
类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码如下：
代码示例：
index.wxml
<!--pages/demo/index.wxml-->
<view wx:for="{{array}}" wx:key="idx" wx:for-index="idx" wx:for-item="itemName">
索引：{{idx}},值：{{itemName}}
</view>
<view wx:for="{{userList}}" wx:key="id" wx:for-item="itm">
id：{{itm.id}},值：{{itm.name}}
</view>
index.js
// pages/demo/index.js
Page({
/**
页面的初始数据
*/
data: {
array: ['苹果','华为','小米'],
userList: [{id: 1,name: '小红'},
{id: 2,name: '小黄'},
{id: 3,name: '小白'}]
},
})