我想呈现如代码所示的多行,
它应该获取列表并将其呈现为行,每行包含文本,图标和...,
对于仅40个项目,渲染大约需要2秒,正常吗还是我用错误的程序编码?
有什么方法可以加快速度?
[在其他文章中,我看到有人声称使用Angular进行编码会显着提高速度,对吗?
我知道2秒不会太多,但是此列表也可以最多包含2000个项目。 200件物品大约需要8秒,而2000件物品大约需要40秒甚至崩溃!
<template>
<GridLayout
ref="bottomPanel"
class="bottomPanel"
verticalAlignment="bottom"
rows="10 ,* ,10"
columns="1 ,* ,5"
>
<Label
row=1
col=1
verticalAlignment="center"
:text="statusInfo"
class="StatusInfo"
v-if="statusInfo"
/>
<ScrollView
row=1
col=1
>
<StackLayout padding=5>
<GridLayout
v-for="( item , index ) in this.$store.state.listToShow.data"
:key="index"
class="itemBox"
columns="65,*,35,33"
rows="*"
>
<Image
col=0
row=0
class="itemAvatar"
stretch="aspectFill"
/>
<StackLayout
col=0
row=0
class="itemIconLabelBox"
verticalAlignment="center"
@tap="interactiveBoxAction( item )"
@touch="onTouch"
>
<Label
:class="'itemIcon ' + item.iconFont"
:text="String.fromCharCode( '0x' + item.icon )"
textWrap="true"
/>
</StackLayout>
<Label
row=0
col=1
class="itemTitle"
:text="item.name"
@tap="interactiveBoxAction( item )"
@touch="onTouch"
textWrap="true"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</GridLayout>
</template>
当您要渲染大量项目时,应使用ListView。
您的iOS / Android设备无法一次渲染这么多视图,这会影响性能。
要拯救的ListView:
[RadListView还提供了许多其他功能,例如滑动动作,用于对齐列表项的各种布局等,