微信小程序 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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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判断变量类型常用方法
2012/04/24 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
删除重复数据的算法
2006/11/23 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python计算两个数的百分比方法
2018/06/29 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
C#面试题问题集
2016/04/02 面试题
教师党员整改措施
2014/10/24 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
Flink 侧流输出源码示例解析
2022/09/23 Servers