小程序33-列表渲染

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

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

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

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

注意事项:

  1. 如果不加wx:key,会报一个warning,如果明确知道该列表是静态,即以后数据不会改变,或者不必关注其顺序,可以选择忽略。
  2. 在给 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
    }
  }


})
相关推荐
只有干货38 分钟前
前端传字符串 后端比较date类型字段
前端
波波鱼દ ᵕ̈ ૩1 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
climber11212 小时前
【Python Web】一文搞懂Flask框架:从入门到实战的完整指南
前端·python·flask
Watermelo6172 小时前
极致的灵活度满足工程美学:用Vue Flow绘制一个完美流程图
前端·javascript·vue.js·数据挖掘·数据分析·流程图·数据可视化
门前云梦2 小时前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Micro麦可乐2 小时前
前端拖拽排序实现详解:从原理到实践 - 附完整代码
前端·javascript·html5·拖拽排序·drop api·拖拽api
Watermelo6172 小时前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
Micro麦可乐2 小时前
前端与 Spring Boot 后端无感 Token 刷新 - 从原理到全栈实践
前端·spring boot·后端·jwt·refresh token·无感token刷新
Heidi__2 小时前
前端数据缓存机制详解
前端·缓存
讨厌吃蛋黄酥2 小时前
前端路由双雄:Hash vs History,谁才是React项目的真命天子?
前端·react.js·设计