微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法


Posted in Javascript onFebruary 21, 2019

本文实例讲述了微信小程序控制台提示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:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法

查找资料与查看官方文档发现原因大致如下:

官方解释:

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

网上资料:

wx:key 的值以两种形式提供

1、wx:key="property" 其中property是代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。类似于字典的key值

2、wx:key="*this", 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组

件保持自身的状态,并且提高列表渲染时的效率。

不添加wx:key情况:

<block wx:for="{{navItems}}" wx:for-item="item" wx:for-index="itemIdx">
  <view bindtap="navItemTap" class="top-btn {{navBtnSelectIdx == itemIdx ? 'top-hoverd-btn' : ''}}" data-index="{{itemIdx}}" data-cid="{{item.cid}}">{{item.title}}</view>
</block>

会出现warning: Now you can provide attr "wx:key" for a "wx:for" to improve performance. 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

推荐array 的 每一个item都添加一个唯一识别的property来管理,这样就可以去掉warning,如果使用保留关键字,好像会出现显示的item都是最后一个的

<block wx:for="{{navItems}}" wx:key="navItems" wx:for-item="item" wx:for-index="itemIdx">
  <view bindtap="navItemTap" class="top-btn {{navBtnSelectIdx == itemIdx ? 'top-hoverd-btn' : ''}}" data-index="{{itemIdx}}" data-cid="{{item.cid}}">{{item.title}}</view>
</block>

好了, 再也没有烦人的提示了!

注意:这里添加了wx:key="navItems"

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 #Javascript
详解Puppeteer前端自动化测试实践
Feb 21 #Javascript
javascript中join方法实例讲解
Feb 21 #Javascript
React 组件渲染和更新的实现代码示例
Feb 21 #Javascript
vue图片上传本地预览组件使用详解
Feb 20 #Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 #Javascript
浅谈小程序 setData学问多
Feb 20 #Javascript
You might like
php开启openssl的方法
2014/05/15 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
网页javascript精华代码集
2007/01/24 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
JavaScript去掉空格的方法集合
2010/12/28 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
python实现的文件同步服务器实例
2015/06/02 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
使用python3构建文件传输的方法
2019/02/13 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python 装饰器的使用示例
2020/10/10 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
机械专业应届生求职信
2013/12/12 职场文书
军训自我鉴定100字
2014/02/13 职场文书
庆元旦演讲稿
2014/09/15 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
三八妇女节标语
2014/10/09 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript