Question

我得到：

Avoid using ListView or ScrollView with no explicit height set inside StackLayout. Doing so might results in poor user interface performance and a poor user experience.

我的UI性能在Android上非常糟糕。在iOS上看起来非常流畅。我正在尝试找出可能是什么问题。这个错误对我来说是错误的。我正在运行“ nativescript-angular”：“ ^ 8.0.0”，

<ScrollView [visibility]="isBusy ? 'collapsed' : 'visible'" #sv>
<GridLayout rows="auto,auto,auto,auto" id="t2" columns="*" class="template_body">
        <GridLayout row="0" col="0" #wv1wrapper>
            <!-- <web-view id="instruction-wv" #wv1></web-view> -->
            <template-text [data]="lessonDetail.instruction" *ngIf="lessonDetail.instruction" [screenwidth]="screenWidth"></template-text>

        </GridLayout>
        <StackLayout row="1" col="0" class="main-img">
            <Image [src]="(lesson$ | async)?.thumbUrl" #imgref [data-image]="(lesson$ | async)?.imageUrl" (tap)="modalImage($event);"></Image>
        </StackLayout>
        <GridLayout row="2" col="0" #wvwrapper>
            <!-- <web-view id="wv" #wv></web-view> -->
            <template-text [data]="lessonDetail.body_text" [version]="version" *ngIf="lessonDetail.body_text" [screenwidth]="screenWidth"></template-text>

        </GridLayout>
    </GridLayout>

这是一个插入主模板中的路由器出口的模板：

<FlexboxLayout class="contentbody" [visibility]="isBusy ? 'hidden' : 'visible'" [data-template]="template_id">
            <Label [text]="error" *ngIf="error"></Label>
            <router-outlet></router-outlet>
    </FlexboxLayout>

也在该页面上，我在堆栈布局中确实有一个listview。

<StackLayout row="0" >
        <StackLayout class="vocab-notes">
            <Label *ngIf="vocabArray" class="h3 section-title" text="Vocabulary"></Label>
                <ListView [items]="vocabArray" id="vocablistview" (itemTap)="onItemTap($event)" class="list-items">
                    <ng-template let-item="item" let-i="index" let-odd="odd" let-even="even">
                        <GridLayout columns="*" rows="auto,auto" [class.odd]="odd" [class.even]="even" class="vocab-list">
                            <FlexboxLayout col="0" row="0" class="vocab-list-item-layout">
                                <Label [text]='item.label' textWrap="true" [id]="item.id" class="h3 vocab-list-item" (tap)="showVocab($event)"></Label>
                            </FlexboxLayout>
                        </GridLayout>
                    </ng-template>
                </ListView>
        </StackLayout>

Answer 1

我知道它来晚了，但是如果将来有人在寻找它，那么如果您在加载的任何页面上都无法访问控制台，那么

JS：避免使用在StackLayout内未设置显式高度的ListView或ScrollView。这样做可能会导致不良的用户界面性能和不良的用户体验。

您只需要给您的scrollView一个高度，尝试不同的高度，例如我需要650高度

<Page class="main" actionBarHidden="true">
        <StackLayout class="gradient-bg">
            <ScrollView orientation="vertical" height="650"> <!-- Here height is 650 -->
                <StackLayout>
                    <GridLayout rows="50" class="page-header">
                        <Label
                            row="0"
                            class="fa label-back"
                            :text="'fa-arrow-left' | fonticon"
                            v-on:tap="navigateTo('app')"
                        />
                        <Label text="Plot Suggestion" row="0" class="lbl-heading" horizontalAlignment="center" /> 
                        ...
                        ...

如何修复android ui性能

1 个答案: