小程序33-列表渲染

Mr.Liu62025-06-03 9:18

列表渲染就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上

在组件上使用 wx:for 属性绑定一个数组或对象，既可使用每一项数据重复渲染当前组件
每一项的变量名默认为item，下标变量名默认为index

在使用 wx:for进行遍历的时候，建议加上wx:key 属性，wx:key的值以两种形式提供:

字符串: 代表需要遍历的array 中 item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变
保留关键字*this 代表在for 循环中的item 本身，当item 本身是一个唯一的字符串或者数字时可以使用

注意事项:

如果不加wx:key，会报一个warning，如果明确知道该列表是静态，即以后数据不会改变，或者不必关注其顺序，可以选择忽略。
在给 wx:key 添加属性值的时候，不需要使用双大括号语法，直接使用遍历的array中item的某个属性

html 复制代码

<!--pages/profile/profile.wxml-->

<!-- 如果需要进行列表渲染，需要使用 wx：for属性 -->
<!-- 属性值需要使用双大括号进行包裹 -->
<!-- 每一项的变量名默认是item -->
<!-- 每一项下标的变量名默认是 index -->
<view wx:for="{{ numList }}">{{ item }} - {{ index }}</view>

<!-- 如果渲染的是数组，item：数组的每一项，index：下标 -->
<view wx:for="{{ obj }}">{{ item }} - {{ index }}</view>

<!-- wx: key 提升性能 -->
<!-- wx: key 属性值有两种添加方式 -->
<!-- 1.字符串，需要遍历数组item的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变 -->
<!-- 2.保留关键字 *item 代表的是item本身，item本身是唯一的字符串或者数字 -->
<view wx:for="{{ fruitList }}" wx:key="id">{{ item.name }}</view>
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

javascript 复制代码

// pages/profile/profile.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    numList: [1,2,3],
    fruitList: [
      { id: 1, name: '🍎' },
      { id: 2, name: '🍋' },
      { id: 3, name: '🍅' }
    ],
    obj: {
      name: 'tom',
      age: 10
    }
  }


})