微信小程序列表渲染

一 wx:for

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

<view wx:for="{{array}}">

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

</view>

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

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

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

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

 示例代码如下。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">

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

</view>

三 wx:key 的使用

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

// data 数据

data: {

    userList: [

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

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

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

    ]

  }

// wxml 结构

<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>