What is an infinite scroll component

What do we do when we have a list page with millions of entries? Paging may not be the best way to experience this, and infinite scrolling is a better technique for dealing with this scenario. As the user scrolls down the content, the list component for the next page is automatically added to load more content. The user does not have to wait for the page to be preloaded, and for front-end rendering, not having to repeatedly render a large number of components improves page rendering performance. So infinite scrolling can provide a better experience for users.

Infinite scrolling is a very common mode in e-commerce website, CMS background and other applications. Online retailers like this mode of loading products because it allows users to seamlessly navigate through each product available in a category without constantly pausing and waiting for the next page to load.

About vue3 – infinite – the list

Website:Github.com/tnfe/vue3-i…

Vue3-infinite-list is a snappy infinite scroll component for VUe3, which is very small and has a zero dependent GZIP of only 3KB. Although there are many open source components related to vUE, vue3-infinite- List still has its own features compared to similar products, and it is written entirely using vue3 Setup API + typescript, the project LOGO is always the Myriad caterpillar 😃.

features

  • Small size & zero dependency – only 3KB after Gzipped
  • Support million-level list rendering, effortless
  • Supports scrolling to specified entries and specifying an initial scroll offset
  • Supports various lists of fixed and variable width/height
  • Supports lists of different layouts vertically or horizontally
  • For Vue3 typescript writing
  • Simple to use can be combined with all kinds of UI library

How to use

usenpm:

npm install vue3-infinite-list --save
Copy the code

useyarn:

yarn add vue3-infinite-list
Copy the code

reference

import InfiniteList from 'vue3-infinite-list';
Copy the code
  <InfiniteList 
   :data="data" 
   :width="'100%'" 
   :height="500" 
   :itemSize="50" 
   :debug="debug" 
   v-slot="{ item, index }"
   >
    <div class="li-con">{{ index + 1 }} : {{ item }}</div>
  </InfiniteList>
Copy the code

Use the sample

  1. Basic usage: item Fixed height type, vertical scrolling (default)demo

It is very simple to use and can be combined with Element-Plus or ANTD-Vue, TDesign and other UI libraries internally.

<InfiniteList 
  :data="data" 
  :width="'100%'" 
  :height="500" 
  :itemSize="50" 
  :debug="debug" 
  v-slot="{ item, index }"
>
  <div class="li-con">{{ index + 1 }} : {{ item }}</div>
</InfiniteList>
Copy the code

  1. Set the scroll direction to horizontaldemo

  <InfiniteList
    :data="data"
    :width="900"
    :height="220"
    :itemSize="115"
    scrollDirection="horizontal"
    :debug="debug"
    v-slot="{ item, index }"
  >
    <div class="li-con li-con-r">
      item{{ index }} <br />
      xxxxxxx <br />
      xxxxxxx <br />
      <el-button type="primary" round>Primary</el-button>
    </div>
  </InfiniteList>
Copy the code

ScrollDirection =”horizontal” to set the scrollDirection to horizontal.

  1. Dynamically control the scrolling height (the height value of each item changes)demo

  <InfiniteList
    :data="data"
    :width="'100%'"
    :height="520"
    :itemSize="getItemSize"
    :debug="debug"
    v-slot="{ item, index }"
  >
    <div class="li-con">item {{ index }} : {{ item }}</div>
  </InfiniteList>
Copy the code
Const getItemSize = (I: number): number => {switch (I % 4) {case 1: return 80; case 2: return 50; case 3: return 100; default: return 200; }};Copy the code

GetItemSize is a function with the following syntax: (I: number): number dynamically sets the width and height of the element.

  1. Scroll to the specified element positiondemo

  <InfiniteList
    :data="data"
    :width="'100%'"
    :height="500"
    :itemSize="getItemSize"
    :scrollToIndex="scrollToIndex"
    :debug="debug"
    v-slot="{ item, index }"
  >
    <div class="li-con" :class="getClass(index)">item{{ index + 1 }} : {{ item }}</div>
  </InfiniteList>
Copy the code

You can also use scrollToIndex to scroll to a specified element.

  1. Scroll to the specified element (finer alignment)demo

    <InfiniteList
      :data="data"
      :width="'100%'"
      :height="500"
      :itemSize="getItemSize"
      :scrollToIndex="scrollToIndex"
      :scrollToAlignment="scrollToAlignment"
      :debug="debug"
      v-slot="{ item, index }"
    >
      <div 
        class="li-con" 
        :class="getClass(index)"
       >
         item{{ index + 1 }} : {{ item }}
      </div>
    </InfiniteList>
Copy the code

You can use the scrollToIndex and scrollToAlignment properties to specify how the scroll element aligns with the scroll region with four options: Auto, start, Center, end, corresponding to automatic alignment, at the beginning of the container, in the middle of the container, at the end of the container.

  1. Scroll to the specified position in pixelsdemo

  <InfiniteList
    :data="data"
    :width="'100%'"
    :height="500"
    :itemSize="90"
    :scrollOffset="scrollOffset"
    :debug="debug"
    v-slot="{ item, index }"
  >
    <el-row class="mb-4 li-con">
      <el-col :span="8">index: {{ index + 1 }} </el-col>
      <el-col :span="8">xxxxxxxxxx</el-col>
      <el-col :span="8">
        <el-button type="primary">Primary</el-button> 
        <el-button type="success">Success</el-button></el-col
      >
    </el-row>
  </InfiniteList>
Copy the code

You can also use scrollOffset to scroll to a specified location.

  1. Support dynamic change of datademo

  <InfiniteList 
    :data="data" 
    :width="'100%'" 
    :height="500" 
    :itemSize="60" 
    :debug="debug" 
    v-slot="{ item, index }"
  >
    <el-row class="li-con">
      <el-col :span="6">item{{ index + 1 }}</el-col>
      <el-col :span="6">2022-05-01</el-col>
      <el-col :span="6">Name: Tom</el-col>
      <el-col :span="6">
        <el-button type="primary">Button</el-button>
        <el-button type="success">Button</el-button>
      </el-col>
    </el-row>
  </InfiniteList>
Copy the code

You only need to change the bound data dynamically.

  1. Sets the number of additional render elementsdemo

<InfiniteList 
  :overscanCount="2" 
  :data="data" 
  :width="'100%'" 
  :height="500" 
  :itemSize="50" 
  :debug="debug" 
  v-slot="{ item, index }"
>
  <div class="li-con">{{ index + 1 }} : {{ item }}</div>
</InfiniteList>
Copy the code

Render an additional overscanCount item above and below the visible item. Tweaking it can help reduce scrolling flickering on some browsers/devices.

Component properties and configuration

attribute type Is it necessary? describe
width Number or String* ✓ List width. In scroll direction is'horizontal'Is used to determine the number of scroll elements.
height Number or String* ✓ List width. In scroll direction is'vertical'Is used to determine the number of scroll elements.
data any[] ✓ Build the data for the scroll element
itemSize (index: number): number This can be a fixed width/height (depending on the scrolling direction), an array containing all the elements of the list, or a function that returns the height of the elements at a specified position:(index: number): number
scrollDirection String Specify roll direction'vertical'(Default) or'horizontal'.
scrollOffset Number You can specify the scroll position
scrollToIndex Number You can specify which element to scroll to
scrollToAlignment String In combination withscrollToIndexUsed together to control the alignment of scrolling elements. Optional:'start'.'center'.'end' or 'auto'Using the'start'Will align to the start of the container,'end'Is aligned to the end of the element. use'centerCan be aligned to the center of the container.'auto'Scroll toscrollToIndexSpecifies where the element happens to be fully visible
overscanCount Number The number of additional elements rendered above/below visible elements. This reduces flicker on specific browsers/devices

Width can only be string if scrollDirection is ‘vertical’. Similarly, Height can only be string * if scrollDirection is ‘horizontal’

At the end

A zero dependence, suitable for vUE’s short and concise infinite scrolling loading library on the use of the end, is not super easy to use, hurry to use it, use any problems, please report it in this report.