小程序开发过程中在写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. xdebug远程调试原理分析

    xdebug可以控制PHP程序的执行,这意味着xdebug可以在任何时候暂停或者恢复正在运行的PHP程序.当PHP程序被暂停的时候,xdebug可以获取到程序的有关 信息,比如变量的值等.xdebug ...

  2. windows gvim插入当前时间

    :nnoremap <F5> "=strftime("%c")<CR>P :inoremap <F5> <C-R>=str ...

  3. poj 2524 Ubiquitous Religions 一简单并查集

    Ubiquitous Religions   Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 22389   Accepted ...

  4. 广义线性模型 - Andrew Ng机器学习公开课笔记1.6

    在分类问题中我们如果: 他们都是广义线性模型中的一个样例,在理解广义线性模型之前须要先理解指数分布族. 指数分布族(The Exponential Family) 假设一个分布能够用例如以下公式表达, ...

  5. [uboot]Issue list

  6. core2.1独立布署,报错的原因。

    除了所有的.dll和exe 还有一个特别重要的文件.deps.json,

  7. Spring整合activiti单元测试

    ** * Spring测试activiti配置是否正常 * <p>Title: SpringActivitiTest</p> * <p>Description: & ...

  8. c经典算法

    1. 河内之塔 说明 河内之塔(Towers of Hanoi)是法国人M.Claus(Lucas)于1883年从泰国带至法国的,河内为越战时 北越的首都,即现在的胡志明市:1883年法国数学家 Ed ...

  9. python中的列表生成式

    列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list [1, 2, 3, 4, 5, 6, 7, 8, 9, ...

  10. 有关Servlet的生命周期说法正确的有( )。

    A.Servlet的生命周期由Servlet实例控制 B.init()方法在创建完Servlet实例后对其进行初始化,传递的参数为实现ServletContext接口的对象 C.service()方法 ...