时间戳

首页 > 解决方案 > NavieScript + Vue 渲染 40 行占用太多，如何加快速度？

vue.js - NavieScript + Vue 渲染 40 行占用太多，如何加快速度？

问题描述

我想渲染多行，如代码所示，

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

对于仅 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.jsnativescriptrendering

解决方案

当您想要呈现大量项目时，您应该使用ListView 。

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

ListView 来拯救：

  • 它会有自己的滚动条（你不应该用 ScrollView 包装它）。
  • 您将定义一个或多个模板。
  • 模板的布局应该是静态的，你不应该使用诸如 v-if、v-for 之类的东西，这会使它变得动态。
  • 但是您可以根据数据调整元素本身，例如根据项目中的数据更改背景颜色
  • 这有助于操作系统在屏幕上仅呈现有限数量的实际 UI 元素，并且当用户向上/向下滚动时，它将重用具有不同数据的相同元素。

RadListView还提供了更多开箱即用的功能，例如滑动操作、对齐列表项的各种布局等，

推荐阅读