在 Nativescript 中以编程方式滚动到 ScrollView 的视图底部

Question

我正在开发一个应用程序，当用户单击卡片视图布局时，该视图的详细信息会在该卡片视图布局上打开。我使用 nativescript ScrollView 来滚动视图。但是，当用户单击最后一个卡片视图布局时，它应该滚动以显示卡片视图布局的详细信息。它不会自动滚动到最后一个卡片视图详细信息，因此卡片视图的详细信息是隐藏的，用户必须手动滚动。

我找到了这个Nativescript scroll to bottom of ScrollView programmatically，但我无法解决我的问题。下面是我的布局代码。

   <ScrollView id="scrollView" #scrollView orientation="vertical" #scrollView     (scroll)="onScroll($event)">

          <StackLayout row="0" col="0">
            <StackLayout *ngFor="let item of items" class="card-view" id="cardViewLayout">

              <GridLayout columns="auto, *, auto" rows="auto,auto,auto" (tap)="toggleDetail(@event)">

              </GridLayout>

              <GridLayout row="3" col="0" colSpan="3" columns=" *, *" rows="auto,auto" id="detailedData" visibility="hidden" class="cardDetail">

                <StackLayout row="0" col="0" class="detailDataStack">
                </StackLayout>

              </GridLayout>

        </StackLayout>
      </StackLayout>
    </ScrollView>


 toggleDetail(args){
    var scrollView = this.page.getViewById("scrollView")
    var offset = this.scrollView.nativeElement.scrollableHeight;
    this.scrollView.nativeElement.scrollToVerticalOffset( this.scrollView.nativeElement.offset+ 120, false);   
 }

如上所示，当用户点击卡片视图类布局时，它正在切换cardDetail类。当卡片视图中有最后一项时，它应该会自动滚动以显示详细信息，但不会自动滚动。

在 toggleDetail() 方法中，我尝试获取 scrollableHeight，将 120 添加到该高度并使其在用户进入最后一项时滚动，但没有任何反应。

Playground 示例应用程序 ScrollView Sample app Nativescript Playground

提前谢谢你:)

Answer 1

您应该使用verticalOffset 而不仅仅是offset。

this.scrollView.nativeElement.scrollToVerticalOffset(this.scrollView.nativeElement.verticalOffset + 120, false); 

Answer 2

只需使用 scrollToVerticalOffset 和 scrollableHeight

const scrollView = page.getViewById('scroll-view');
scrollView.scrollToVerticalOffset(scrollView.scrollableHeight, true);