确定组件是否在屏幕中可见

Question

我使用 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>

我使用了这个 sn-p 的代码，效果很好：

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

我可以更改“ng-template”中“StackLayout”的背景颜色。

但我无法访问我的自定义组件变量来修改他的行为。

例如，如果显示“my-custom-component”，我想更改“aCard”属性中传递的“card”对象中的“isShown”属性。

谢谢大家:)

编辑1： “isShown”是我用于此测试的自定义变量。我的想法是在 afterScroll 函数中计算可见的卡片是什么，并将参数传递给 aCard 以改变他的行为。

Answer 1

当滚动事件发生时，您可以在 ScrollView 中找到每个子组件的位置，将其与垂直偏移量进行比较可以让您知道该组件是否真的在屏幕上可见。

Here is a Playground example。当您向下/向上滚动时，可见组件的背景颜色将变为绿色，否则变为红色。

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;
    });
}

Answer 2

您需要更新您的allList 对象，因为NgForOf 是可绑定的，它会更新卡片并反映在您的my-custom-component 的[acard] 中

在您必须使用相对高度的滚动事件中，您需要一个唯一变量来标识显示的组件并更改allList 中该索引的属性。

我创建了一个示例 playgrod here，如果滚动高度大于 300，我将自定义组件 Label 的文本更改为 isShown。我更改标签名称的方式是，您可以在 @ 中有一个布尔变量987654326@ 改变你的逻辑来改变stackLayout的背景颜色。如果您想更新游乐场，请告诉我。