In this article, I will explain how to create a page in Vue.js with smooth endless scrolling. To illustrate how it’s done, I’ll create a very simple search page on which you can scroll endlessly through the results.
The goal is for the page to be smooth, fast, and free of potential performance issues.
Why am I calling it a _smooth_endless scrolling page? To keep the experience smooth for the end-user, they must be able to endlessly scroll without constantly waiting for the page to load. Keeping that in mind, let’s start with our simple application.
To begin, we create a new project using vue-cli with
vue create my-project-name.
We’re going to need three components:
We’ll be using the component for the individual search results as part of a virtual scroller. I will explain the benefits of that in a bit.
<template> <div class="endless-scrolling-list"> <div class="search-box"> <input type="text" v-model="searchQuery"/> </div> <p class="center" v-if="results.length == 0 && !loading"> Start typing to search something. </p> <virtual-list :data-key="'pageid'" :data-sources="results" :data-component="itemComponent" :page-mode="true" /> <loader v-if="loading" /> </div> </template>