Nativescript 无法让 ListView 滚动到底部

Posted

技术标签:

【中文标题】Nativescript 无法让 ListView 滚动到底部【英文标题】:Nativescript can't get ListView to scroll to bottom 【发布时间】:2018-07-21 07:06:02 【问题描述】:

加载时,我试图让 ListView 滚动到底部。然而,什么也没有发生。这是我在 android 上运行的:

   <ListView #lv row="0" [items]="myItems" class="list-group" separatorColor="transparent" [itemTemplateSelector]="templateSelector">

然后在 Typescript 我有:

  @ViewChild('lv') listViewElem: ElementRef;

    private scrollToBottom(lv: ListView) 
    if (lv && lv.items.length > 0) 
        lv.scrollToIndex(lv.items.length - 1);
        lv.refresh();
    


  ngAfterViewInit() 
    setTimeout(() => 
       this.scrollToBottom(this.listViewElem.nativeElement);
    , 500);

当我调试时,一切似乎都很好。在 ngAfterViewInit 中,定义了 listViewElem,在 scrollToBottomView 中将 items 设置为一个包含 6 个元素的数组。但是当它被调用时,什么都没有发生。

我还尝试在视图中添加一个按钮,当您单击时,我会调用相同的逻辑来查看它是否只是加载时初始化顺序的事情,但这也不起作用:

  <Label row="0" text="Click Me" filter(tap)="scrollNow()"></Label>

还有:

 public scrollNow(): void 
     this.scrollToBottom(this.listViewElem.nativeElement);
  

有什么想法吗?

【问题讨论】:

【参考方案1】:

我想知道你为什么在scrollToIndex 之后尝试lv.refresh();,因为刷新会重新加载 ListView,它会重新开始。

【讨论】:

老实说,我刚刚用谷歌搜索了如何滚动到底部,我看到的所有解决方案都有这个。我从来没有想过要删除它。不过这行得通,谢谢! 如何实现平滑滚动? 你这是什么意思? scrollToIndex 应该可以正常工作。如果您有问题,请详细说明。 对不起,我刚刚找到了答案。 this.listViewElem.nativeElement.android.smoothScrollToPosition(1)。我的意思是将滚动动画显示到特定索引。【参考方案2】:
function sendComment(arg) 
    var message = Frame.topmost().currentPage.getViewById('message').text;
    var listView = Frame.topmost().currentPage.getViewById('listview');
    chatMessages.push(
        sender_id: '828838383333',
        receiver_id: '939939494949',
        body: message,
        from: ,
        to: ,
        createdAt: ''
    );
    listView.refresh();
    listView.scrollToIndex(chatMessages.length - 1, false);

chatMessages 是您的可观察数组。

【讨论】:

以上是关于Nativescript 无法让 ListView 滚动到底部的主要内容,如果未能解决你的问题,请参考以下文章

Nativescript-Vue:如何在 ListView 中正确使用 v-for

风味“nativescript-ui-listview”具有未知维度“nativescript-ui-listview”

使用 ListView 和 nativescript-vue 进行无限滚动

NativeScript 中的 ListView.itemTemplate 和图像

水平 StackLayout 中的 ListView - Nativescript Vue

无法点击自定义 FAB(浮动操作按钮)的 NativeScript 项