



下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】「小程序JAVA实战」小程序视图之细说wx:key列表高级特
wx:key的高级特性。这个很重要,因为在app上经常有上拉,下拉加载,我们如果不使用这个特性的很可能列表就乱了。源码:/limingios/wxProgram.git中的No.8wx:key的高级特性。这个很重要,因为在app上经常有上拉,下拉加载,我们如果不使用这个特性的很可能列表就乱了。源码:/limingios/wxProgram.git中的No.8小程序的列表的渲染官方的阐述>/miniprogram/dev/framework/view/wxml/list.html演示wx:key>如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如input中的输入内容,
的选中状态),需要使用wx:key来指定列表中项目的唯一的标识符。wx:key的值以两种形式提供字符串,代表在for循环的array中item的某个property,该property的值需要是列表中唯一的字符串或数字,且不能动态改变。保留关键字*this代表在for循环中的item本身,这种表示需要item本身是一个唯一的字符串或者数字,如:当数据改变触发渲染层重新渲染的时候,会校正带有key的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。wxKey.wxml<!wxKey.wxml-->
<view
class="container">
<switch
wx:for="{{objectArray}}"
wx:key="unique"
>
{{item.id}}
</switch>
<button
bindtap="switch">
Switch
</button>
<button
bindtap="addToFront">
Add
to
the
front
</button>
<switch
wx:for="{{numberArray}}"
wx:key="*this"
>
{{item}}
</switch>
<button
bindtap="addNumberToFront">
Add
to
the
front
</button>
</view>wxKey.js//wxKey.js
//获取应用实例
const
app
=
getApp()
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
})
}
})如果不加入wx:key=”unique”或者wx:key=”*this”进行绑定的话,可能存在漂移的情况,这种问题很大,建议在for循环的时候都定义一个唯一的key。如果不加入wx:key=”unique”或者wx:key
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 企业员工服务意识培训
- 冷链物流项目运营方案
- 教育培训在线教育培训机构运营与管理方案
- 品牌形象与营销策略匹配度评估表
- 医药冷链运输国际
- 能源企业社会责任报告编制指南
- 季度项目进展及成果汇报会议纪实
- 血液肿瘤练习试题及答案
- 保育师初级复习试题有答案
- 物流配送中心库存管理优化方案
- 陕西省建筑工程施工通用表格、控制资料-(全套)
- 教科版科学五年级下册第一单元《生物与环境》测试卷含完整答案(夺冠系列)
- 小企业创业基地一期用地道路工程
- 口腔诊所污水、污物、粪便处理方案
- 解读存款保险条例课件
- 英语八年级比较级课件
- 部编版四年级下册语文课件《纳米技术就在我们身边》(完美版)
- 人教版新起点英语四年级下册Unit 2《Cities》单元教学目标
- 【小升初】2023小学六年级人教版道德与法治升学毕业试卷及答案(时政+上下册考点)04
- 部编版道德与法治六年级下册第一单元《完善自我 健康成长》单元作业设计
- 人教版三年级下册音乐教案教学设计
评论
0/150
提交评论