微信小程序 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 相关文章推荐
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python简单实现enum功能的方法
2016/04/25 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
C++的几个面试题附答案
2016/08/03 面试题
总结表彰大会主持词
2014/03/26 职场文书
商铺消防安全责任书
2014/07/29 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
报到证办理个人委托书
2014/10/06 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
超市采购员岗位职责
2015/04/07 职场文书
音乐课外活动总结
2015/05/09 职场文书
歌舞青春观后感
2015/06/10 职场文书
婚育证明样本
2015/06/16 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python