微信小程序列表渲染

一 wx:for

通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下。

    索引是：{{index}}，item 项是：{{item}}

默认情况下，当前循环项的索引用 index 表示，当前循环项用 item 表示。

二 手动指定索引和当前项的变量名

• 使用 wx:for-index 可以指定当前循环项的索引的变量名

• 使用 wx:for-item 可以指定当前项的变量名

 示例代码如下。

    索引是：{{idx}}，item 项是：{{itemName}}

三 wx:key 的使用

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码如下。

// data 数据

data: {

    userList: [

      { id: 1, name: '小红' },

      { id: 2, name: '小黄' },

      { id: 3, name: '小白' }

    ]

  }

// wxml 结构

{{item.name}}