微信小程序控制台提示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 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
来自qq的javascript面试题
Jul 24 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
基于jquery实现左右按钮点击的图片切换效果
Jan 27 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript中关于iframe滚动条的去除和保留
Nov 17 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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
合作指挥官:孟斯克
2020/03/16 星际争霸
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP生成静态页面详解
2006/11/19 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
Python查询IP地址归属完整代码
2017/06/21 Python
Python之reload流程实例代码解析
2018/01/29 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
python每天定时运行某程序代码
2019/08/16 Python
Django 自动生成api接口文档教程
2019/11/19 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
如何通过命令行进入python
2020/07/06 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
销售人员自我评价
2014/02/01 职场文书
自主招生教师推荐信
2014/05/10 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
大学生安全责任书
2014/07/25 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Mysql如何查看是否使用到索引
2022/12/24 MySQL