Usually, Listview scrolls from top to bottom. To load more item, we hit the last bottom item like this:
<ListView *ngIf="messages" [items]="messages" (loadMoreItems)="onLoadMoreItems()" [itemTemplateSelector]="templateSelector" separatorColor="transparent">
<ng-template nsTemplateKey="receiver" let-item="item">
// more codes
</ng-template>
<ng-template nsTemplateKey="owner" let-item="item">
// more codes
</ng-template>
</ListView>
I try to invert the scrolling direction (from bottom to top). Also as this is for a chat application, I try to call the loadMoreItems function when the user hits the last top item.
Is there anyone here who already did that? Or has an idea on how I could proceed? Thanks
This may not be the best way to achieve it but at least it works. My answer is inspired by many other ones. Let me know if you have a better/more native solution.
I kept the ListView and I added a ngAfterViewInit with a private function (scrollToIndex)
ngAfterViewInit() {
setTimeout(() => {
this.scrollToIndex();
}, 2000);
}
private scrollToIndex(): void {
let yourStackLayoutInstance = this.listview.nativeElement;
yourStackLayoutInstance.scrollToIndex(this.messages.length-1);
}
The logic behind is to populate your ListView and when it's done you can scroll to the last item.
Each time you add a last item you have to call this scrollToIndex function.