微信小程序 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弹出层插件简化版代码下载
Oct 16 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
jQuery动态添加
Apr 07 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
原生js封装的ajax方法示例
Aug 02 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 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
php下实现折线图效果的代码
2007/04/28 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP实现简单日历类编写
2020/08/28 PHP
jQuery学习笔记之回调函数
2016/08/15 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
React Component存在的几种形式详解
2018/11/06 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
pandas通过loc生成新的列方法
2018/11/28 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
小学校园之星事迹材料
2014/05/16 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
销售团队口号大全
2014/06/06 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
学前班学生评语
2014/12/29 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
房贷工资证明范本
2015/06/12 职场文书
元宵节晚会主持词
2015/07/01 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
移除Selenium中window.navigator.webdriver值
2022/06/10 Python