NavieScript + Vue渲染40行花太多时间,如何加快速度?

问题描述 投票:0回答:1

我想呈现如代码所示的多行,

它应该获取列表并将其呈现为行,每行包含文本,图标和...,

对于仅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>
vue.js nativescript rendering
1个回答
0
投票

当您要渲染大量项目时,应使用ListView

您的iOS / Android设备无法一次渲染这么多视图,这会影响性能。

要拯救的ListView:

  • 它将拥有自己的滚动条(您不应使用ScrollView对其进行包装)。
  • 您将定义一个或多个模板。
  • 模板的布局应该是静态的,您不应使用v-if,v-for等之类的东西,这会使它动态化。
  • 但是您可以根据数据调整元素本身,例如根据项目中的数据更改背景颜色
  • [这有助于OS在屏幕上仅呈现有限数量的实际UI元素,并且当用户向上/向下滚动时,它将重复使用具有不同数据的相同元素。

[RadListView还提供了许多其他功能,例如滑动动作,用于对齐列表项的各种布局等,

© www.soinside.com 2019 - 2024. All rights reserved.