微信小程序wxml列表渲染原理解析

2023-08-05 08:03:04 78

这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

列表渲染存在的意义

以电商为例，我们希望渲染5个商品，而又希望容易改变，我们就要在wxml中动态添加。



{{index+1}}:{{item.name}}

Page({
data:{
message:"helloworld",
products:[{
name:"商品A"
},
{
name:"商品B"
},
{
name:"商品C"
},
{
name:"商品D"
},
{
name:"商品E"
}
]
}

})

上面在一个非显示组件block中，我们渲染五个有内容的view

wx:for是循环数组，wx:for-item即给列表赋别名

子循环


{{item.id}}

{{items.name}}{{items.account}}

wx:key用来稳定渲染，作为渲染想的唯一标识（主要有三种）

1、字符串

代表在for循环的array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。

data:{
input_data:[
{id:1,unique:"unique1"},
{id:2,unique:"unique2"},
{id:3,unique:"unique3"},
{id:4,unique:"unique4"},
]
}
//test.wxml

2、保留关键字*this

代表在for循环中的item本身，这种表示需要item本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

data:{
numberArray:[1,2,3,4],
stringArray:['aaa','ccc','fff','good']
}
//test.wxml


},

一般是指定一个唯一的字段(类似于id的定义);

3、通配符+名字

用wx:key和不用对比

wk:key	组件识别	渲染情况	状态情况	for效率
有	各组件可识别	渲染时仅改变组件顺序	保持组件之前原来状态	效率高
无	组件无法识别	渲染时重新创建各组件	重置组件的初始状态	效率低

1.需要wx:key的情况

列表中项目的位置会动态改变或者有新的项目添加到列表中

希望列表中的项目保持自己的特征和状态

（如中的输入内容，的选中状态）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序wxml列表渲染原理解析

热门推荐

随机推荐