Building an endless scrolling list

A ListView widget can be customized to display an exhaustive list of items. There are multiple ways in which this can be done, for example, by adding a button at the bottom of the list, after clicking on which, the next set of elements would be added to the list. The other way would be to add more elements as and when the user scrolls down. This is called endless scrolling and it provides a seamless experience when the user is scrolling through an exhaustive list. In this recipe, we will see both the approaches, that is, adding a button to load more elements and creating an endless scrolling list, which is loaded when the user scrolls down.

How to do it…

In both the cases, the DataSource object must be configured so that it returns a limited number of records. While configuring DataSource for the ListView widget, specify the pageSize attribute:

dataSource: {
  transport: {
    read: '/movies/listService'
  },
  pageSize: 10
}

To add the button at the bottom...