NativeScript Vue - 仅在列表的视口中呈现项目答案

【问题标题】：NativeScript Vue - Only render items in viewport on the listNativeScript Vue - 仅在列表的视口中呈现项目
【发布时间】：2020-04-08 20:37:14
【问题描述】：

我有一个模板

<template>
<Page>
    <ScrollView>
        <StackLayout>
            <RouteInfo
                v-for="route in fakeData"
                :key="route.key"
                :route="route" />
        </StackLayout>
    </ScrollView>
</Page>
</template>

RouteInfo 组件相当复杂，其中包含多个组件。 NativeScript 似乎正在渲染整个列表，即使它不在视口中。这是一个巨大的性能损失，特别是对于“大”列表，因为它首先呈现所有内容，然后显示列表。如何强制它只渲染视口中的内容？

【问题讨论】：

使用 NativeScript 组件 ListView 或 RadListView 将完成此操作。

标签： android vue.js nativescript nativescript-vue

【解决方案1】：

请改用ListView。就像在示例中一样，在 ListView 中使用内置的“for”循环，而不是使用“v-for”。它更像是原生的。

【讨论】：