web前端全系列 教程
1839个小节阅读:2243.8k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,需要使用 wx:key
来指定列表中项目的唯一的标识符
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率
温馨提示
如不提供
wx:key
,会报一个warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略
xxxxxxxxxx
<view wx:for="{{ news }}" wx:for-item="item" wx:key="id">
<view>{{ item.name }}</view>
</view>
xxxxxxxxxx
Page({
data: {
news:[
{
"id": 1,
"name": "美食-甜豆干"
},
{
"id": 2,
"name": "好欢螺螺蛳粉300g*6袋"
}
]
}
})
当我们想数组中添加新的数据,并且放在首位的时候,在渲染的时候,key
就起到了作用
xxxxxxxxxx
<button type="primary" bindtap="clickHandle">增加数据</button>
<view wx:for="{{ news }}" wx:for-item="item" wx:key="id">
<view>{{ item.name }}</view>
</view>
xxxxxxxxxx
Page({
data: {
news:[
{
"id": 1,
"name": "美食-甜豆干"
},
{
"id": 2,
"name": "好欢螺螺蛳粉300g*6袋"
}
]
},
clickHandle(){
this.setData({
news:this.data.news.concat({
"id":"3",
"name": "对夹"
})
})
}
})