微信小程序 wx:for
使用wx:for
// js文件
Page({data: {array:[{id: 1,name: "张三",},{id: 2,name: "李四",}]},
});
<!--wxml文件-->
<view wx:for="{{array}}" wx:for-index="id" wx:for-item="item">{{id}}: {{item.name}}
</view>
渲染的页面
理解for循环:
在组件上使用
wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。数组中当前项的下标变量名默认为
index
,数组当前项的变量名默认为item
。使用
wx:for-item
可以指定数组当前元素的变量名;使用wx:for-index
可以指定数组当前下标的变量名,此变量名可以视为除索引外所有值的集合,通过.
的方式调用某一具体值
使用上述for循环后,控制台会输出warning: Now you can provide attr wx:key
for a wx:for
to improve performance.,这表明使用wx:key
能提高效率
[WXML Runtime warning] ./pages/demo/demo.wxmlNow you can provide attr `wx:key` for a `wx:for` to improve performance.37 | <input bindinput="handleInput" /> -->38 |
> 39 | <view wx:for="{{array}}" wx:for-index="id" wx:for-item="item">| ^40 | {{id}}: {{item.name}}41 | </view>
wx:key
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
在不使用 wx:key
的情况下, 如果 array 内的数据是动态改变的,则会不断的重新创建每个Item对象并渲染列表,效率较低。而通过使用 wx:key
,如果array中的数据发生改变,只是将对应的对象重新排序。未发生变化的对象,不会重新创建。
使用场景
wx:key
适用于动态改变的数组,对于静态数组可用可不用。
使用方法
1. wk:key=“字符串”
wk:key="字符串"
表示参与循环的某个数组array中的item的变量名,该变量的值应是列表中唯一且不发生改变的字符串或者数字。
例如下面代码中的id是唯一且不变的,所以wx:key="id"
// js文件array:[{id: 1,name: "张三",},{id: 2,name: "李四",}]
2. wk:key="*this"
wk:key="*this"
代表在for循环中的item自身,这种表示需要item本身就是一个唯一的字符串或者数字。
// xx.js
data: {numberArray: [1, 2, 3, 4],stringArray:['aaa','ccc','fff','good']
}
<!--xx.wxml--><input value="id:{{ item }}" wx:for="{{numberArray}}" wx:key="*this" /><input value="id:{{ item }}" wx:for="{{stringArray}}" wx:key="*this" />
参考文章:
- 微信小程序 列表渲染 wx:for 来源:w3school
- 微信小程序: wx:key详解 作者:Jowney 来源:简书
- wx:key的使用及wx:key的值
微信小程序 wx:for相关推荐
- 微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
- imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识 二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
- 微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
- 微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑 如何使用 第二个坑 如何使用 微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
- 微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念 区别: wx.setStorage是异 ...
- 微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...
- 企业微信小程序wx.qy.login 的调用调试踩坑
企业微信小程序wx.qy.login 的调用调试踩坑 起步 在企业微信的开发过程中有很多坑,一切以企业微信开发文档为准. 近期我公司项目需要我联调开发企业微信小程序,以前没开发过,所以一切只能跟着企业 ...
- 解决微信小程序 wx.request 方法不支持 Promise 并发数问题
wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...
- 微信小程序wx.downloadFile()使用体验
微信小程序wx.downloadFile()使用体验 想给单位做一个小程序,实现模板文件下载的功能,方便办事群众把文件下载到手机上自行打印填写,也能提高办事效率. 不过想法是好的,截止目前2018年1 ...
- uniapp开发微信小程序 wx.navigateBack()携带数据问题
uniapp开发微信小程序 wx.navigateBack()携带数据问题 某个表单页面 有时需要跳转另一个页面查询数据 但如此想要保存当前页面数据需要在另一个查询页面调用 wx.navigateBa ...
最新文章
- 在本机快速创建YUM源
- IT项目之旅(一)《宿舍管理系统》设计与实现
- Hi3516A开发--i2c tools安装和使用
- C#、.Net经典面试题目及答案
- Apk打包-签名过程
- shell的控制语句
- 计算机选购知识点,笔记本选购知识点,找准自己的需求才是王道
- n皇后问题java_经典n皇后问题java代码实现
- 工程实践之 复杂保存解构 TODO
- MDC功能软件-感知融合算法介绍
- [置顶] Oracle学习经验谈
- MySQL-第五篇视图
- 最简单解决jpa自动生成表后字段乱序问题
- STL源码剖析(侯杰)——读书笔记
- 安装SQL Server 2016及一些常用操作
- 刚入行的软件测试工程师如何自学软件测试?
- Java把html转成word
- 第一行代码Android技巧1——知晓当前是在哪一个活动
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
- 总谐波失真计算公式_IEC61000-4-3测试系统的谐波场强分量测量方法
热门文章
- 【Linux入门连载二】Linux系统有哪些基本目录?
- maven配置阿里云_阿里云OSS PicGo 配置图床教程 超详细
- java socket回调_Java ServerSocketChannel SocketChannel(回调)
- iPhonexr安兔兔html5测试,给大家科普下iphonexr苹果手机安兔兔跑分多少分
- 学python需要记笔记吗_自学python需要做什么笔记
- 通达信波段王指标公式主图_通达信指标公式源码超赢天下主图源码
- php nginx配置范例,nginx配置文件范文
- python字典通过键值获取键名,通过value获取key
- c语言课程设计坦克大战,funcodec++课程设计_坦克大战
- java 之在校期间最后一次实训记录