Without any jittering or external libraries

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:

• One generic component for our search page and list
• A component for the individual search results
• A loader component

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>

In the HTML part of our Vue application, you see the search box, a message to start searching before the user has typed something, and a virtual scroller list.

#javascript #programming #vuejs #angular