warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance.
小程序开发过程中在写for循环的时候会出现如下报错
warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance.
<block wx:for="{{imgUrls}}" wx:key="swiper">
<swiper-item>
<image src='{{item}}' class='slide-image' width="355" height="150"></image>
</swiper-item>
</block>
小程序API文档表示:
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/>
中的输入内容,<switch/>
的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
wx:key
的值以两种形式提供
- 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
- 保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供 wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
于是......在block上加上wx:key属性就不报错了
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src='{{item}}' class='slide-image' width="355" height="150"></image>
</swiper-item>
</block>
warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance.的更多相关文章
- 微信小程序开发warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance
用微信官方的模板发现突然报了这个warning,检查原因: 官方解释: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <i ...
- 小程序开发-Now you can provide attr "wx:key" for a "wx:for" to improve performance
Now you can provide attr "wx:key" for a "wx:for" to improve performance 是一个关于性能优 ...
- Now you can provide attr "wx:key" for a "wx:for" to improve performance. 微信小程序警告
Now you can provide attr "wx:key" for a "wx:for" to improve performance为警告,不处理不影 ...
- 小程序-Now you can provide attr "wx:key" for a "wx:for" to improve performance
转自:https://www.cnblogs.com/xpwi/p/9878871.html 小程序开发-Now you can provide attr "wx:key" for ...
- 微信小程序——Now you can provide attr "wx:key" for a "wx:for" to improve performance.
在官方的swiper(滑块视图容器)中demo代码,运行时会出现Now you can provide attr "wx:key" for a "wx:for" ...
- 微信小程序警告:Now you can provide attr "wx:key" for a "wx:for" to improve performance.
那是因为在<block wx:for-items="{{imgUrls}}">中不存在wx:key="imgUrls"所以才导致报了个警告. 写成& ...
- 小程序:最难点For的wx:key
转自:http://www.wxappclub.com/topic/536 A:数据改变,导致重新渲染的两种情况: 1:有wx:key的情况(不重新创建,仅改变顺序) 添加元素或改变元素顺序导致数据改 ...
- Unable to find element on closed window (WARNING: The server did not provide any stacktrace information)
当你的selenium WebDriver 启动IE11报这个错时:Unable to find element on closed window (WARNING: The server did n ...
- 微信小程序wx:key以及wx:key=" *this"详解:
今天写微信小程序无意中看到控制台给出了这样一行提示: 求解百度才知道,给大家分享一下: 1.wx:for定义 官方文档:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲 ...
随机推荐
- django.db.utils.OperationalError: no such table: auth_user
关于使用django 首次创建超级管理员时,出现 django.db.utils.OperationalError: no such table: auth_user 错误 1.首先使用命 ...
- unity5,UI Button too small on device than in Game View解决办法
假设测试设备为iphone5(横屏).下面说明如何使真机上ui显示效果与Game View中一致. 1,首先Game View左上角屏幕规格选 iPhone 5 Wide (16:9),如图: 2,在 ...
- 【Android】14.2 外部文件存储和读取
分类:C#.Android.VS2015: 创建日期:2016-02-27 一.简介 1.基本概念 内部存储的私有可用存储空间一般都不会很大,对于容量比较大的文件,例如视频等,应该将其存储在外部存储设 ...
- UIButton 按钮控件-IOS开发 (实例)
转自:http://justcoding.iteye.com/blog/1467999 UIButton是一个标准的UIControl控件,所以如果你对UIControl不甚了解还是先看一下我的另一篇 ...
- 2015 HDU 多校联赛 5317 RGCDQ 筛法求解
2015 HDU 多校联赛 5317 RGCDQ 筛法求解 题目 http://acm.hdu.edu.cn/showproblem.php? pid=5317 本题的数据量非常大,測试样例多.数据 ...
- UltraISO制作启动盘及提取U盘为ISO镜像
我们先来说下UltraISO这个工具,中文名也叫软碟通,他是一个无需量产你的U盘就可以把U盘做成启动盘的工具,当然了,这么强大的工具肯定不是免费版的,对,他是共享的:但是你可以下载特别版嘛..网上到处 ...
- CodeForces 558D
Guess Your Way Out! II Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- Phoenix的数据类型和操作符、函数
其实官方文档已经有这些东西了,如下: http://phoenix.apache.org/language/functions.html http://phoenix.apache.org/langu ...
- mysql 使用 temp
whereis 软件 检查数据库mysqlcheck -uroot -p --all-databases 修复$ mysql -uroot -p databasename REPAIR TABLE t ...
- Bootstrap学习笔记(6)--导航居中
说明:没找到好办法 <div class="row"> <ul class="nav nav-pills col-md-offset-4"&g ...