Nativescript can't get ListView to scroll to bottom

Question

On load, I'm trying to get a ListView to scroll to the bottom. However, nothing happens. Here's what I have, running on Android:

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

Then in Typescript I have:

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

As I debug, everything seems good. In ngAfterViewInit, listViewElem is defined, in scrollToBottomView items is set to an array with 6 elements in it. But when it's called nothing is happening.

I've also tried to just add a button to the view that when you click I call this same logic to see if it's just a load-time initialization order thing, but that doesn't work either:

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

And:

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

Any ideas?

Manoj · Accepted Answer · 2018-02-10 21:34:23Z

4

May I know why do you try lv.refresh(); right after scrollToIndex, because refresh will reload the ListView and it will just go back to start.

answered Feb 10, 2018 at 21:34

Manoj

21.9k3 gold badges23 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1513171 Over a year ago

Honestly, I had just Googled how to scroll to bottom and all of the solutions I saw had this in it. Never occurred to me to remove it. That works though, thanks!

raks Over a year ago

How to achieve smooth scrolling?

Manoj Over a year ago

What do you mean by that? scrollToIndex should just work fine. If you have issues please elaborate.

raks Over a year ago

Sorry, I just found the answer. this.listViewElem.nativeElement.android.smoothScrollToPosition(1). What I meant was to display the scrolling animation to a particular index.

Codedreamer · Accepted Answer · 2019-11-16 16:03:51Z

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

The chatMessages is your observable array.

Collectives™ on Stack Overflow

Nativescript can't get ListView to scroll to bottom

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related