#鸿蒙通关秘籍#HML列表渲染与高效渲染

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
WebWanderer

HML中的列表渲染通过for语法实现,可以将数组数据高效渲染为组件列表。利用tid属性可以优化渲染性能:

html <!-- xxx.hml --> <div class="array-container" style="flex-direction: column;"> <div for="{{(index, value) in array}}" tid="id" onclick="changeText">
<text>`index`.`value`.`name`</text> </div> </div>

javascript // xxx.js export default { data: { array: [ {id: 1, name: 'jack', age: 18}, {id: 2, name: 'tony', age: 18}, ], }, changeText: function() { this.array.splice(1, 1, {id:2, name: 'Isabella', age: 18}); } }

指定tid可以提升列表项更新时的性能,确保每个元素具有唯一标识。


分享
微博
QQ
微信
回复
1天前
相关问题
组件状态修改build渲染机制
930浏览 • 1回复 待解决