NavieScript + Vue занимает слишком много времени для рендеринга 40 строк. Как это ускорить?

Question

Я хочу отобразить несколько строк, как указано в коде,

он должен получить список и отобразить его в строки, каждая строка содержит текст, значок и ...,

длявсего 40 элементов для рендеринга занимает около 2 секунд, это нормально? или я кодирую это в неправильной процедуре?

есть ли способ ускорить его?

в других постах я видел, что кто-то утверждает, что кодирование в Angular значительно улучшит скорость, верно?

IЗнайте, что 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>

Answer 1

Вы должны использовать ListView , если вы хотите отобразить огромный список элементов.

Ваше устройство iOS / Android не может отображать столько просмотров одновременно, что повлияет на производительность.

ListView для спасения:

• У него будет свой собственный скроллер (вы не должны оборачивать его ScrollView).
• Вы будетеопределить один или несколько шаблонов.
• Макет шаблона должен быть статичным, вы не должны использовать такие вещи, как v-if, v-for и т. Д., Что сделает его динамичным.
• Но вы можете настроитьсам элемент на основе данных, например, изменение цвета фона на основе данных в элементе
• Это помогает ОС отображать на экране только ограниченное количество фактических элементов пользовательского интерфейса и будет повторно использовать один и тот же элемент с различными данными в качестве пользователяпрокрутка вверх / вниз.

Существует также RadListView поставляется с множеством дополнительных функций, таких как действия смахивания, различные макеты для выравнивания элементов списка и т. д.,