小程序开发过程中在写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 的值以两种形式提供

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *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.的更多相关文章

  1. 微信小程序开发warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance

    用微信官方的模板发现突然报了这个warning,检查原因: 官方解释: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <i ...

  2. 小程序开发-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 是一个关于性能优 ...

  3. 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为警告,不处理不影 ...

  4. 小程序-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 ...

  5. 微信小程序——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" ...

  6. 微信小程序警告:Now you can provide attr "wx:key" for a "wx:for" to improve performance.

    那是因为在<block wx:for-items="{{imgUrls}}">中不存在wx:key="imgUrls"所以才导致报了个警告. 写成& ...

  7. 小程序:最难点For的wx:key

    转自:http://www.wxappclub.com/topic/536 A:数据改变,导致重新渲染的两种情况: 1:有wx:key的情况(不重新创建,仅改变顺序) 添加元素或改变元素顺序导致数据改 ...

  8. 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 ...

  9. 微信小程序wx:key以及wx:key=" *this"详解:

    今天写微信小程序无意中看到控制台给出了这样一行提示: 求解百度才知道,给大家分享一下: 1.wx:for定义 官方文档:在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲 ...

随机推荐

  1. atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

    atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...

  2. SMBus总线概述

    1.概述: 系统管理总线是一种两线制接口.它基于I2C 总线原理演变而来,可以认为是简化版的I2C总线. SMBus最初是应用到智能电池,如电池充电器和一个微控制器.其提供一个系统和电源管理相关的任务 ...

  3. UIViewController的生命周期及iOS程序执行顺序 和ios6 处理内存警告

    当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc                                   创建对象,分配空间2.init (initWithN ...

  4. ERROR C3848:具有类型"const XXX" 的表达式会丢失一些 const-volatile 限定符以调用"YYY" with"ZZZ"

    今天看书,Thinking in c++ volume 2 "Adaptable function objects" 里面作者说: Suppose, for example, th ...

  5. js eval深入

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  6. js json对象和数组对象

    动态添加json对象: var json = {}; json['a'] = 'a'; 动态添加数组对象: var arr = []; arr['a'] = 'a';

  7. 常用jar命令

    JAR包是Java中所特有一种压缩文档.存储格式格式就是.zip包.但是与ZIP包不同的地方是,生成JAR包时候,会自动添加一个META-INF\MANIFEST.MF文件 命令参数jar {c t ...

  8. 1.thinkphp 权限分析

    一.权限分析 用户表 user角色表 role权限表 node think_acces role_id 用户组idnode_id 节点IDlevel 节点等级pid 父级ID THINK_ACCESS ...

  9. 深入理解Mybatis中sqlSessionFactory机制原理

    对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章将通过以下几点详细介绍MyBatis的初始化过程. 1.MyBatis的初始化做了什么 2. MyBatis基于XML配置 ...

  10. OGNL是Object-Graph Navigation Language的缩写,它是一种功能强大的表达式语言

    OGNL是Object-Graph Navigation Language的缩写,它是一种功能强大的表达式语言(ExpressionLanguage,简称为EL),通过它简单一致的表达式语法,可以存取 ...