Нативный скрипт RadSideDrawer зависает

У меня есть RadSideDrawer на многих страницах моего приложения Nativescript. Главный компонент приложения имеет page-router-outlet, а все остальные страницы загружаются в этот компонент вместе с навигацией. Страницы с ящиком содержат компонент RadSideDrawer вокруг содержимого страницы.

Проблема в том, что RadSideDrawer зависает при переходе между страницами. Вы можете видеть это здесь:

RadSideDrawer зависает

Переход RadSideDrawer не плавный. Но когда я устанавливаю угловое образцы пользовательского интерфейса nativescript, угловое приложение, переходы между ящиками очень плавные. :

Образец пользовательского интерфейса гладкий


nativescript nativescript-telerik-ui
person zarax    schedule 02.11.2017    source источник
comment
Опубликуйте HTML-код своего RadSideDrawer и любого кода программной части, который с ним взаимодействует - ищите чрезмерное использование структурных директив Angular (например, * ngIf) и старайтесь минимизировать их использование (например, используйте видимость)   -  person Nick Iliev    schedule 07.11.2017
comment
HTML-код RadSideDrawer очень маленький и содержит только один ngFor. Основная проблема производительности заключается в том, что почти все страницы, на которые осуществляется переход, содержат список элементов. Nativescript должен отображать пользовательский интерфейс списка, и это заставляет приложение зависать на короткое время. Я установил задержку в 100 мс между данными, полученными с сервера, и установил для него значение ui, чтобы пользовательский интерфейс начал отображать 100 мс после навигации по странице. В это время RadSideDrawer закрывается плавно.   -  person zarax    schedule 13.11.2017
comment
Я думаю, что Nativescript занимает слишком много времени для рендеринга пользовательского интерфейса.   -  person zarax    schedule 13.11.2017
comment
@zarax Если вы визуализируете много данных о загрузке / навигации страницы, пытались ли вы перенести загрузку в рабочий процесс, если это возможно, или просто сначала загрузили подмножество элементов? Я обнаружил, что Nativescript не намного медленнее, чем native для таких вещей (примечание: я использую nativescript vanilla, а не angular, поэтому ваш пробег может отличаться)   -  person Roland    schedule 14.11.2017
comment
@Roland Я не обрабатываю много данных. Просто список предметов. При составлении этого списка нет операций с интенсивным использованием ЦП. Я просто беру его с сервера и показываю. Я уже пользуюсь RadListView. Насколько мне известно, он отображает только те элементы, которые видны на экране. Таким образом, даже если список содержит 50 элементов, он отобразит 5 или 6 из них. Но, как вы можете видеть, элементы списка - это не просто текстовые элементы. На них есть какие-то ярлыки.   -  person zarax    schedule 14.11.2017
comment
@zarax может ли задержка быть связана с получением данных с сервера? Ака, если это займет 500 мс, тогда будет задержка в 500 мс перед выполнением остальной части вашего кода? (Просто догадываюсь, так как я не знаю, как вы организовали свой код). Также попробуйте перейти на простую страницу, которая ничего не загружает (например, страницу с парой жестко закодированных кнопок и текста), чтобы увидеть, сохраняется ли задержка.   -  person Roland    schedule 15.11.2017
comment
@Roland Задержка в HTTP-запросах не влияет на производительность приложения, так как в javascript HTTP-запросы не блокируют выполнение кода. Страницы - это не простые страницы. Они содержат списковые представления. Пункты в списке имеют другие элементы. Из-за этого это не простой список строк. Основная проблема, похоже, связана с проблемой рендеринга. Отображение страницы занимает слишком много времени, и приложение зависает.   -  person zarax    schedule 16.11.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что лучший подход - отложить доступ к данным внутри визуализированного компонента, чтобы можно было завершить навигацию (и анимацию) из RadSideDrawer. Затем, когда данные доступны, начинается рендеринг компонента.

Если вы смешиваете оператор задержки RxJS (при условии, что вы получаете данные с помощью Observable) с ActivityIndicator - вы можете получить неплохие результаты.

Ниже приводится одно из множества возможных решений.

TS файл:

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { EventItem } from "../../../../models/event-item.model";
import { AppStateFacadeService } from "../../../../services/app-state-facade.service";
import { delay } from "rxjs/operators";

@Component({
    selector: "Test",
    moduleId: module.id,
    templateUrl: "./test.component.html",
    styleUrls: ["./test.component.css"]
})
export class TestComponent implements OnInit {
    events$: Observable<Array<EventItem>>;

    constructor(private appStateFacade: AppStateFacadeService) {}

    ngOnInit(): void {
        this.events$ = this.appStateFacade.getEvents().pipe(delay(400));
    }
}

HTML файл:

<StackLayout *ngIf="events$ | async as events; else nocontent">
    <ListView class="list-group" [items]="events">
        <ng-template let-event="item">
            <EventItem [eventItem]="event"></EventItem>
        </ng-template>
    </ListView>
</StackLayout>
<ng-template #nocontent>
    <ActivityIndicator row="1" #activityIndicator busy="true" width="100" height="100" class="activity-indicator">
    </ActivityIndicator>
</ng-template>
person Sebastian Denis    schedule 11.11.2019