微信小程序控制台提示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 禁止复制网页
Jun 11 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
jQuery中extend函数详解
Feb 13 Javascript
json的使用小结
Jun 08 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
微信小程序数字滚动插件使用详解
Feb 02 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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 skymvc 一款轻量、简单的php
2011/06/28 PHP
PHP编码转换
2012/11/05 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
设定php简写功能的方法
2019/11/28 PHP
JS 对象介绍
2010/01/20 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python3 爬取图片的实例代码
2018/11/06 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python+opencv实现阈值分割
2018/12/26 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
简易离婚协议书范本2014
2014/10/15 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
建国大业观后感600字
2015/06/01 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS