Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/linux/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Nativescript 确定组件在屏幕中是否可见_Nativescript_Visibility_Show Hide_Angular2 Nativescript_Nativescript Angular - Fatal编程技术网

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

Nativescript 确定组件在屏幕中是否可见,nativescript,visibility,show-hide,angular2-nativescript,nativescript-angular,Nativescript,Visibility,Show Hide,Angular2 Nativescript,Nativescript Angular,我使用Nativescript+Angular,这是我的代码: <ScrollView class="body" id="scroll" #scroll (scroll)="scrollEvent($event);"> <StackLayout #stackScroll> <ng-template ngFor let-card [ngForOf]="allList"> <StackLayout [card

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

我使用了这段代码,效果非常好:

我可以更改“ng模板”内“StackLayout”的背景色

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

例如,如果显示“我的自定义组件”,我想更改在“aCard”属性中传递的“card”对象中的属性“isShown”

谢谢大家:)

编辑1:
“isShown”是我在本测试中使用的自定义变量。我的想法是在afterScroll函数中计算哪些卡片可见,并将参数传递给aCard以更改其行为。

您需要更新可绑定的
allList
对象,它将更新卡片,这将反映在
我的自定义组件的[aCard]中。

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

我创建了一个示例playgrod,如果滚动高度大于300,我会将自定义组件标签的文本更改为isShown。在我更改标签名称的方式中,您可以在
allList
中使用一个布尔变量,在该变量中,您可以使用更改stackLayout背景颜色的逻辑。如果您想更新playgrond,请告诉我


在scroll事件中,您可以在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;
    });
}
onScroll(事件:EventData){
const scrollView=event.object,
verticalOffset=scrollView.verticalOffset,
高度=scrollView.getActualSize().height,
可视范围=垂直偏移+高度,
容器=this.container.nativeElement;
设指数=0;
container.eachLayoutChild((childView)=>{
const locationY=childView.getLocationRelativeTo(容器).y;

这个.cards[index].isShown=locationY>=verticalOffset&&locationY我想你说的是原生android视图的
isShown
属性。如果是这样的话,你的组件本身已经有了值,那么我可以问你为什么要在
aCard
中传递它吗?不,“isShown”是我在测试中使用的自定义变量。我的想法是在Aftercroll函数中计算卡的可视性,并将参数传递给aCard以更改其行为。是否可以使用android的本机属性?如何使用?我认为“Ishown”如果视图可见或隐藏,则返回,如果视图在屏幕中可见,则返回,但您已任意给定“300”通过测量,您没有计算卡片显示的内容,也没有找到相对索引。正如您所提到的,您可以更改背景颜色,您的问题给我的印象是,您正在寻找如何在自定义组件中传递变量的想法。