小程序基础12:列表渲染

1.列表渲染

wx:for

在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: ‘foo‘,
    }, {
      message: ‘bar‘
    }]
  }
})

使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名:

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

上面的代码:将默认的 index 更改为 idx,将默认的 item 更改为 itemName

wx:for也可以嵌套,下边是一个九九乘法表:

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block wx:for

类似block wx:if,也可以将wx:for用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

内容缺失

时间: 2024-08-10 00:04:01

小程序基础12:列表渲染的相关文章

微信小程序,我的英雄列表

最近微信小程序炒得火热,就跟成都的这个房价一样.昨天我也尝试了一下,做了一个自己的英雄列表.今天将自己的制作过程记录于此. 1.下载微信开发者工具 官网链接:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364,下载完成之后默认安装即可 2.新建项目 打开微信开发者工具,(首次需要微信扫码登录),如下图所示,点击添加项目,然后依次输入APPID,项目名称,并选择你的项目所在的目录(本地目录

微信小程序 - 展开收缩列表

代码源自于:微信小程序示例官方 index.wxml 1 <block wx:for-items="{{list}}" wx:key="{{item.id}}"> 2 <view class="kind-list-item"> 3 <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-h

大牛带您微信小程序基础

前言什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画图"小程序等,小程序不同于APP一点的是,小程序成本低,前期宣传,可以靠扫描二维码,分享群,朋友圈等,来提高微信小程序的使用.无需安装即可下载的特点,也深受广大群众的喜欢.介绍小程序是一种用完即走的那么一种模式,从开始的B2C模式,人与商品,到P2P模式,人与人,在到C2P模式,人与服务.小程序就是那

.NET教程:微信小程序基础入门

.NET教程:微信小程序基础入门 准备 Demo 项目地址 (https://github.com/zce/weapp-demo) Clone or Download(需准备GIT环境) $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git project-name --depth 1 $ cd project-name 没有git环境,可以直接下载 (https://github.com/zce/

【WeChat 小程序】005 - 条件渲染以及列表渲染

条件渲染 1. 概念: 只有当条件成立时才渲染生成 2.wx:if属性的设置 示例代码: <text wx:if="{{thisWeekMovie.isHighlyRecommended}}">强烈推荐</text> 注:只有当thisWeekMovie.isHighlyRecommended为真时,界面元素才会被渲染 类似的:使用hidden属性也可以实现类似的效果,但元素总是会被生成,增大初始化开销 <text hidden="{{!this

小程序基础

一.准备 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 小程序的 AppID 相当于小程序平台的一个身份证. 开发工具的使用 界面:模拟器(iphone6标准).编辑器.调试器: 编译:普通编译.添加编译模式(调试某个页面). 详情(选择开发版本.是否验证合法域名) 二.代码构成 最简单的小程序 ├── app.js ├── app.json ├── app.wxss ├── pages │ │── index │ │ ├── index.wxml │ │

微信小程序基础语法总结

本文介绍微信小程序语法 配置文件 app.json的配置(全局) { // 用来配置页面的路径 "pages":[ "pages/index/index", // 首页 "pages/Test/Test" // 跳转的页面 ], "window":{ "enablePullDownRefresh": true, // 是否支持下拉刷新 "backgroundTextStyle":&quo

关于小程序基础库

基础库 基础库与客户端之间的关系 小程序的能力需要微信客户端来支撑,每一个基础库都只能在对应的客户端版本上运行,高版本的基础库无法兼容低版本的微信客户端. 关于基础库的兼容方法,可以查看「兼容处理」章节. 基础库更新时机 为了避免新版本的基础库给线上小程序带来未知的影响,微信客户端都是携带 上一个稳定版 的基础库发布的. 在新版本客户端发布后,再通过后台灰度新版本基础库,灰度时长一般为 12 小时,在灰度结束后,用户设备上才会有新版本的基础库. 官方API地址 : linkhttps://dev

小程序基础介绍

1.app.json 小程序的全局配置,包括了小程序的所有页面路径.界面表现.网络超时时间.底部 tab 等 @1.pages字段 —— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录.必填 @2.window字段 —— 定义小程序所有页面的顶部背景颜色,文字颜色定义等. @3.tabBar底部tab栏表现 object @4.networkTimeout 网络超时时间 object @5.debug 是否开启debug boolean @6.funct