垂直移动项目列表

Question

我下面有一张地图和一个项目列表。我想向上移动列表(同时保持地图的位置(，直到用户到达列表的最后一个元素。在这种情况下，列表不应再向上移动。

问题在于，即使在最后一个元素显示为白色背景之后，列表仍会继续向上移动。

模板：

<GridLayout rows="*, *, 0" columns="*"> 
<MapView row="0" col="0"> ...
<GridLayout #list rows="*, 0" columns="*" #list row="1" col="0">
    <GridLayout row="0" col="0" class="m-15"
        rows="..." (pan)="onPan($event)">
        ...
    </GridLayout>
</GridLayout>
<GridLayout #ref row="2" col="0">...

组件.ts

onPan(args: PanGestureEventData) {
    switch (args.state) {
      case 1:
        break;
      case 2:
        const diff = this.ref.nativeElement.getLocationRelativeTo(this.list.nativeElement);
        if (diff > 1400) return; // I used 1400 seems based on various devices sizes, it seems like a good number. 
        this.dragContainer.translateY += args.deltaY - this.prevDeltaY;
        this.prevDeltaY = args.deltaY;
        break;
      case 3:
      default:
        break;
    }
}

**预期：**- 我希望当列表中的最后一个元素显示时，列表无法再向上移动

**实际：**- 列表继续向上移动，留下白色背景。

我在这里的原生脚本操场上创建了一个演示 https://play.nativescript.org/?template=play-ng&id=rB4H2M

Answer 1

我终于能够找到一个基本上可以满足我需求的示例。我试图实现的效果称为视差，这是Nativescript演示示例的示例

https://play.nativescript.org/?template=play-ng&id=b9hyJh&v=2