微信小程序 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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
Div Select挡住的解决办法
Aug 07 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
在Django框架中运行Python应用全攻略
2015/07/17 Python
python 实现UTC时间加减的方法
2018/12/31 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
电子商务专业求职信
2014/03/08 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
入党转正介绍人意见
2015/06/03 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
Django使用redis配置缓存的方法
2021/06/01 Redis
在redisCluster中模糊获取key方式
2021/07/09 Redis