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.首先使用命 ...
- python开发者通过国内镜像安装pip包
对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...
- bootstrap-fileinput文件上传组件和laravel引用(未完)
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
- 微软收购跨平台移动应用开发商Xamarin
微软今天宣布收购移动应用跨平台开发商 Xamarin.收购金额未知.Xamarin 提供了通过 C# 开发 iOS.Android 和 Windows 原生移动应用的工具,以及云端应用測试平台 – 全 ...
- c语言优先级和结合性
C语言的运算符众多,具有不同的优先级和结合性,我们将它们全部列了出来,方便大家对比和记忆: 优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 ...
- ognl概念和原理详解
一.问题的提出 在mvc中,数据是在各个层次之间进行流转是一个不争的事实.而这种流转,也就会面临一些困境,这些困境,是由于数据在不同世界中的表现形式不同而造成的: 1. 数据在页面上是一个扁平的, ...
- linux 链接的使用 创建和删除符号连接(软、硬链接)
1 . 使用方式 :ln [option] source_file dist_file (source_file是待建立链接文件的文件,dist_file是新创建的链接文件) ...
- 记一次安装多版本php的四个雷区,你踩着了吗
记一次安装多版本php的四个雷区,你踩着了吗 技术小疯子关注3人评论740人阅读2018-06-29 15:00:30 记一次安装多版本的php的四个雷区,你踩着了吗 需求:公司需要在同一台服 ...
- 绑定内网和安全redis和mongo以及MQ
redis允许局域网访问其实很简单.网上一堆都不怎么靠谱. 特此记录一下. 可参考此篇 假设A B 两台机器 在B(ip:192.168.1.99)机器上修改redis配置文件 bind 192.16 ...
- 30Mybatis_mybatis和spring整合-原始dao开发
这篇文章很重要, 第一步:我们讲一下整合的思路: 我们以前要用Mybatis是需要sqlMapConfig.xml(这个配置文件需要配置dataource,以及mapper.xml文件.)sqlMap ...