微信小程序中wxml列表渲染的示例分析

　　介绍

这篇文章主要介绍微信小程序中wxml列表渲染的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<>强列表渲染存在的意义

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

& lt; view> 　　& lt; block  wx:=皗{产品}},,天气:项=癷tem",天气:关键=癷ndex"比; 　　& lt; view>{{指数+ 1}}:{{item.name}} & lt;/view> 　　& lt;/block> 　　& lt;/view> 页面({ 　　,数据:{ 　　信息:,才能“hello  world" 　　,,产品有:[{ 　　,,,的名字:,“商品A" 　　,,}, 　　,,{ 　　,,,的名字:,“商品B" 　　,,}, 　　,,{ 　　,,,的名字:,“商品C" 　　,,}, 　　,,{ 　　,,,的名字:,“商品D" 　　,,}, 　　,,{ 　　,,,的名字:,“商品E" 　　,,} 　　,,) 　　,} 　　 　　})

上面在一个非显示组件块中,我们渲染五个有内容的视图

天气:因为是循环数组,天气:项即给列表赋别名

子循环

& lt; view 天气:为=皗{parentList}}“比; 　　,{{item.id}} 　　,& lt; view  wx:=皗{item.childList}},,天气:项=癷tems"比; 　　,{{items.name}} {{items.account}} 　　,& lt;/view>

天气:主要用来稳定渲染,作为渲染想的唯一标识(主要有三种)

<强> 1,字符串

代表在对循环的数组中项的某个属性,该属性的值需要是列表中唯一的字符串或数字,且不能动态改变。

数据:,{ 　　input_data:, 　　{,,1,,独特:,“unique1",}, 　　{,,2,,独特:,“unique2",}, 　　{,,3,,独特:,“unique3",}, 　　{id:大敌;4,独特:,“unique4",}, 　　] 　　}//test.wxml 　　& lt; input 价值=https://www.yisu.com/zixun/" id: {{item.id}}”天气:为=" {{input_data}} "天气:关键="独特"/>

<强> 2,保留关键字*这

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

数据:,{ 　　numberArray:, (1,, 2,, 3,, 4], 　　stringArray: [& # 39; aaa # 39; & # 39; ccc # 39;, & # 39; fff& # 39;, & # 39;好# 39;】 　　}//test.wxml 　　& lt; input 价值=https://www.yisu.com/zixun/" id:{{项}}”天气:为=" {{numberArray}} "天气:关键=" * "/> 　　<输入值=" id:{{项}}”天气:为=" {{stringArray}} "天气:关键=" * "/> 　　},

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

<强> 3,通配符+名字

用天气:关键和不用对比

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

1。需要的天气:关键的情况

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

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

(如& lt;输入/比;中的输入内容,& lt;开关/比;的选中状态)

以上是“微信小程序中wxml列表渲染的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

微信小程序中wxml列表渲染的示例分析