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">...

component.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

垂直移动项目列表

1 个答案: