P23_列表渲染

列表渲染

1. wx:for
   
   通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
   
   
   
   默认情况下，当前循环项的索引用 index 表示；当前循环项用 item 表示。

2. 手动指定索引和当前项的变量名*

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

• 示例代码如下：
  
  

1. 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: '小白'}]

},

})