



下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
【移动应用开发技术】「小程序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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年铝线拉丝机行业深度研究报告
- 郴州小学英语试卷分析
- 中国传统礼仪与节日习俗
- 中药与饮食文化的融合发展
- 互联网娱乐产业的创新发展
- 临床护理中的中医技术应用
- 五行与养生探秘古代养生文化
- AI技术的安全隐私保护策略研究
- 牛津版上海版七年级上册 Unit 3 Friends from other countries (单元整体+课时教学设计)
- 传统中医手法在现代医学中的应用研究
- 菩萨蛮黄鹤楼(毛泽东).中职课件电子教案
- 铝银浆MSDS化学品安全技术说明书
- 紫蓝色可爱卡通风《小王子》名著导读儿童文学PPT模板
- 安全疏散设施检查记录参考模板范本
- KTV包房音响系统设计方案
- 常用物理英语词汇大全
- 城市轨道交通设备系统_第十一章_车辆段与综合基地
- 增值税暂行条例实施细则释义
- 如何挖掘商机PPT课件
- 平行四边形培优专题训练
- 公制螺纹塞规的尺寸计算
评论
0/150
提交评论