微信小程序 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 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
javascript中如何判断类型汇总
May 14 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
element中el-container容器与div布局区分详解
May 13 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
JavaScript实现弹出窗口效果
Dec 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
改造一台复古桌面收音机
2021/03/02 无线电
一个颜色轮换的简单例子
2006/10/09 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
jquery radio 操作代码
2011/03/16 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python实现Youku视频批量下载功能
2017/03/14 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
python实现redis三种cas事务操作
2017/12/19 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python检测服务器端口代码实例
2019/08/31 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
技术总监个人的自我评价范文
2013/12/18 职场文书
学子宴致辞大全
2015/07/27 职场文书
计算机教师工作总结
2015/08/13 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers