Infinite Scroll Example

View the live example

This example demonstrates how to implement the popular "infinite scroll" interaction. As the last image scrolls into view, a new set is loaded asynchronously and added to the scroll-view . This example uses an image placeholder API to request JSON payloads containing image URLs.

ScrollView makes it easy to implement infinite scroll due to the onLastEntered callback (see also: Methods & Properties). Consider the small amount of code used to create this example:

<scroll-view>
  <template slot-scope="visible">
    <!--
      ScrollImage doesn't need a 'visible' prop because it doesn't care about it's visibility.
      For the sake of this demo, we only care when the last component enters the viewport.
    -->
    <ScrollImage v-for="i in items" :source="i.url" :key="i.id" /> <!-- component wrapper around an <img> tag -->
  </template>
</scroll-view>

...
data() {
  return {
    page: 1,
    items: []
  }
},
watch: {
  page: {
    immediate: true,
    handler: function () {
      // get some more items every time the page changes
      this.fetchMore()
    }
  }
},
methods: {
  fetchMore() {
    axios.get(`https://jsonplaceholder.typicode.com/albums/${this.page}/photos`) // axios http lib
      .then(({ data }) => this.items = this.items.concat(data.slice(1, 6))) // request returns 50, but just add 5 for the purpose of this demo.
      .catch(console.log)
  },
},
mounted () {
  $scrollview.onLastEntered = () => this.page++ // last component entered, increment the page
}
...