Определить, виден ли компонент на экране - PullRequest
Новая
       26

Определить, виден ли компонент на экране

0 голосов
/ 24 января 2019

Я использую Nativescript + Angular, и это мой код: 

<ScrollView class="body" id="scroll" #scroll (scroll)="scrollEvent($event);">
    <StackLayout #stackScroll>

        <ng-template ngFor let-card [ngForOf]="allList">
            <StackLayout [card]="card">

                <my-custom-component [aCard]="card"></my-custom-component>

            </StackLayout>
        </ng-template>

    </StackLayout>
</ScrollView>

Я использовал этот фрагмент кода, и он прекрасно работает:

https://discourse.nativescript.org/t/how-to-detect-if-component-is-in-screen-view-is-visible/1148/4

Я могу изменить цвет фона «StackLayout» внутри «ng-template».

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

Например, если отображается «my-custom-component», я хочу изменить свойство «isShown» в объекте «card», переданном в атрибуте «aCard».

Спасибо всем:)

EDIT1: isShown - это пользовательская переменная, которую я использовал для этого теста. Моя идея состоит в том, чтобы вычислить в функции afterScroll, какие карты видны, и передать aCard параметр, чтобы изменить его поведение.

Ответы [ 2 ]

0 голосов
/ 25 января 2019

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

Вот пример игровой площадки .При прокрутке вниз / вверх цвет фона видимых компонентов станет зеленым, иначе - красным. 

onScroll(event: EventData) {
    const scrollView = <ScrollView>event.object,
        verticalOffset = scrollView.verticalOffset,
        height = scrollView.getActualSize().height,
        visibleRange = verticalOffset + height,
        container = <StackLayout>this.container.nativeElement;

    let index = 0;
    container.eachLayoutChild((childView) => {
        const locationY = childView.getLocationRelativeTo(container).y;
        this.cards[index].isShown = locationY >= verticalOffset && locationY <= visibleRange
        index += 1;
    });
}
0 голосов
/ 25 января 2019

Вам необходимо обновить allList объект, так как NgForOf является привязываемым, он обновит карту, и это будет отражено в [acard] вашего my-custom-component

В свиткеВ случае, когда вы должны играть с относительной высотой, вы берете уникальную переменную, чтобы идентифицировать отображаемый компонент и изменить свойство для этого индекса в allList.

Я создал образец playgrod здесь где я меняю текст пользовательского компонента Label на isShown, если высота прокрутки больше 300. Как я меняю имя метки, вы можете иметь логическую переменную в allList, чтобы изменить ее там, где у вас есть логикаизменить цвет фона stackLayout.Дайте мне знать, если вы хотите обновить playgrond.

...