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

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

2 个答案: