微信小程序 wx:key详细介绍


Posted in Javascript onOctober 28, 2016

微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下:

  个人感觉官方给出的例 子不是很明确,官方解释如下:

wx:key

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

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

字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。

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

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

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

如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

示例代码:

<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
 data: {
  objectArray: [
   {id: 5, unique: 'unique_5'},
   {id: 4, unique: 'unique_4'},
   {id: 3, unique: 'unique_3'},
   {id: 2, unique: 'unique_2'},
   {id: 1, unique: 'unique_1'},
   {id: 0, unique: 'unique_0'},
  ],
  numberArray: [1, 2, 3, 4]
 },
 switch: function(e) {
  const length = this.data.objectArray.length
  for (let i = 0; i < length; ++i) {
   const x = Math.floor(Math.random() * length)
   const y = Math.floor(Math.random() * length)
   const temp = this.data.objectArray[x]
   this.data.objectArray[x] = this.data.objectArray[y]
   this.data.objectArray[y] = temp
  }
  this.setData({
   objectArray: this.data.objectArray
  })
 },
 addToFront: function(e) {
  const length = this.data.objectArray.length
  this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
  this.setData({
   objectArray: this.data.objectArray
  })
 },
 addNumberToFront: function(e){
  this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
  this.setData({
   numberArray: this.data.numberArray
  })
 }
})

这里写下个人的理解,有什么不对的地方希望大家指正:以<switch></switch>为例,如果没有wx:key,选中其中的某个按钮的时候,改变其顺序 或添加选项的时,选中的按钮时不回跟随 上个按钮改变顺序的,会一直在固定位子,如果如果有wx:key则相反,适用于列表或其他标签可以改变顺序或添加项目的情况

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
jQuery filter函数使用方法
May 19 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 #Javascript
基于Layer+jQuery的自定义弹框
May 26 #Javascript
微信开发 js实现tabs选项卡效果
Oct 28 #Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 #Javascript
Easyui的组合框的取值与赋值
Oct 28 #Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 #Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 #Javascript
You might like
php debug 安装技巧
2011/04/30 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
jQuery 改变P标签文本值方法
2018/02/24 jQuery
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
详解JS函数防抖
2020/06/05 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python