【微信小程序】三分钟学会小程序的列表渲染
文章目录
- 1.wx:for实现列表渲染
- 2.block结合wx:for使用
- 3. wx:key实现列表渲染
- 4.注意事项
1.wx:for实现列表渲染
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
。
<view wx:for="{{array}}">{{index}}: {{item}}
</view>
Page({data: {array: ['第一项','第二项','第三项']}
})
另外,使用 wx:for-item
可以指定数组当前元素的变量名,使用 wx:for-index
可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName}}
</view>
下面做一个演示:在
js
中定义一个数组,使用wx:for
在wxml中重复渲染view组件结构:
显示效果如下:
同时,wx:for
还可以嵌套使用。
2.block结合wx:for使用
当把wx:for
使用到<block/>
标签上时,可以重复渲染一个包含多节点的结构块:
<block wx:for="{{[1, 2, 3]}}"><view> {{index}}: </view><view> {{item}} </view>
</block>
这种使用方法类似于上节的wx:if
结合block
使用来实现条件渲染的方式。
3. wx:key实现列表渲染
小程序在进行列表渲染时,建议为渲染出来的列表项指定唯一的key
值,从而提高渲染的效率。
wx:key
的值以两种形式提供
- 字符串,代表在
for
循环的array
中item
的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。 - 保留关键字
*this
代表在for
循环中的item
本身,这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候,会校正带有 key
的组件,框架会确保他们被重新排序,而不是重新创建
,以确保使组件保持自身的状态。
<view wx:for="{{userlist}}" wx:key="id">
{{item.id}}:{{item.name}}
</view>
Page({data: {userlist:[{id:1,name:'zhang'},{id:2,name:'wang'},{id:3,name:'li'}]}
})
注意:如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
4.注意事项
- 花括号和引号之间如果有空格,将最终被解析成为字符串。
- 当
wx:for
的值为字符串时,会将字符串解析成字符串数组。
<view wx:for="array">{{item}}
</view>
和以下情况相同:
<view wx:for="{{['a','r','r','a','y']}}">{{item}}
</view>
【微信小程序】三分钟学会小程序的列表渲染相关推荐
- 小学生三分钟学会Python程序语法元素分析~总结笔记
Python程序语法元素分析 前言:朕今年在读大二,苦逼学python,写博客为了更好的总结知识,每次写博客可能要花费几个小时,或者更多时间来总结知识,如果你觉得文章对你有帮助,可以在文章末尾点赞和评 ...
- python程序元素分析_荐 小学生三分钟学会Python程序语法元素分析~总结笔记
Python程序语法元素分析 前言:朕今年在读大二,苦逼学python,写博客为了更好的总结知识,每次写博客可能要花费几个小时,或者更多时间来总结知识,如果你觉得文章对你有帮助,可以在文章末尾点赞和评 ...
- 微信小程序接入微信支付(三):小程序端调用支付接口
微信小程序调用支付接口官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5 在上一节中 ...
- 三分钟学会PS小清新调色教程-萧蕊冰
今天的PS小教程教你三分钟学会PS小清新调色教程.夏天到了,夏天的阳光很大,拍出的照片都会有一种暖色的感觉,那么我们怎么把一张照片调成日式小清新呢?今天我们就来学一个PS小清新调色教程,让你体验一下日 ...
- Juniper 210 密码清不掉_三分钟学会如何找回mysql密码
一.在测试工作中我们肯定会写一些sq查询语句方便我们验证数据是否正确,从而判断当前软件是否存在缺陷,但是查询的过程中肯定需要我们先连接数据库,如果数据库密码忘记我们就无法完成工作,这里就教会大家如何快 ...
- 三分钟学会css3中的flexbox布局
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局 ...
- python程序-30分钟学会用Python编写简单程序
原标题:30分钟学会用Python编写简单程序 参与文末每日话题讨论,赠送异步新书 异步图书君 学习目标 知道有序的软件开发过程的步骤. 了解遵循输入.处理.输出(IPO)模式的程序,并能够以简单的方 ...
- adprw指令通讯案例_超实用,非常典型的Modbus通讯项目案例,三分钟学会
本文主要介绍两部分:1.简单介绍Modbus通讯相关知识:2.通讯案例详解: 一.Modbus通讯介绍 1.通讯概述 Modbus具有两种串行传输模式:分别为ASCII和RTU.Modbus是一种单主 ...
- WORD如何设置打印? 三分钟学会WORD打印技巧
我们在办公的时候,很多人时常会需要打印各种各样的文件,很多人都只知道,去打印当前页,或者是整个文档,但在Word打印中也有很多不同的技巧,那么Word如何设置打印?今天呢就来给大家分享一下Word打印 ...
- 【ROM制作工具】如何三分钟学会制作手机线刷包?一键制作线刷包详细教程
如何在最短的时间内制作一款手机线刷包让卡顿的手机线刷回官方?线刷回官方的手机刷机包在制作时有什么样的技巧?接下来将和大家分享一下如何在三分钟制作一款手机线刷包! 一键制作线刷包详细教程 准备工作: 首 ...
最新文章
- 栈和队列存储结构总结
- BZOJ 3993 Luogu P3324 [SDOI2015]星际战争 (最大流、二分答案)
- XHTML教会我的一些东西-1
- servlet中url-pattern之/与/*的区别
- php+正则匹配qq,正则表达式对qq号进行验证的实例
- php isoptional,entity-framework – 实体框架7 Fluent API无法识别IsOptional()
- 学用MVC4做网站五:5.2我的文章
- vscode连接夜神模拟器
- python实现明星专家系统
- asp文件解密 加密
- 计算机机房新风机的作用,你知道机房为什么要装新风系统吗?
- ESP8266+红外模块制作万能网路遥控器
- 如何一键去除Word文件中的水印
- rk 平台实现 otg 软切换
- python操作微信电脑版_python 通过微信发送消息控制电脑
- 机电一体化计算机接口一般分为,[工学]4机电一体化计算机接口设计上.ppt
- wpf 点击按钮弹出新对话框_WPF弹出自定义窗口的方法
- Bugku Misc 流量分析(cnss)
- SHBrowseForFolder 打开默认路径
- 用 python-message 为程序库和日志模块解耦
热门文章
- XRD测试常见问题及解答(一)
- 有没有什么好用的pdf编辑软件?3款App轻松编辑所有PDF文件
- FoxMail7.2信纸设置(适用于7.0及以上版本)
- eas bos编码规则
- Linux下安装Redis——菜鸟入门教程
- android分区调整大小写,小米2 32G开发版 无损分区调整
- 测试用例方法-等价类划分
- 热传导问题的matlab计算,热传导问题的MATLAB数值计算
- 课堂经验值管理小程序_济南小程序开发,微信小程序应用开发实现单店管理
- oracle查看asm磁盘,OracleOnLinux-Windows下如何查看ASM磁盘对应的设备