A vue3 infinite scroll component that supports millions

What is an infinite scroll component

What should we do when our list page has millions of pieces of data? Paging may not be the best way to experience, and infinite scrolling is a better technical means to solve this scenario. When the user scrolls down the content, the list component on the next page is automatically added to load more content. The user does not need to wait for the page to preload, and for front-end rendering, the page rendering performance is improved without repeatedly rendering a large number of components. So infinite scrolling can provide a better experience for users.

Infinite scrolling is a very common mode in applications such as e-commerce websites and CMS backgrounds. Online retailers love this model of loading products because it allows users to seamlessly browse through every product available in a category without having to constantly pause and wait for the next page to load.

About vue3-infinite-list

Official website: https://github.com/tnfe/vue3-infinite-list

vue3-infinite-list is a short and powerful infinite scrolling component for vue3. It is very small in size and only 3kb with zero dependency on gzip. Although there are many infinite scrolling open source components related to vue, it still has many characteristics compared to similar products vue3-infinite-list , and it is completely written using vue3 setup api + typescript , and the project LOGO is a thousand-footed caterpillar 😃 .

characteristic

• Small size & zero dependencies – only 3kb after gzipped
• supports million-level list rendering , effortlessly
• supports scrolling to the specified entry and specifying the initial scroll offset
• supports fixed and variable width/height lists
• supports vertical or horizontal list of different layouts
• For Vue3 Typescript writing
• is easy to use can be used in combination with various UI libraries

how to use

Use npm :

npm install vue3-infinite-list --save

Use yarn :

yarn add vue3-infinite-list

quote

import InfiniteList from 'vue3-infinite-list';

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

Example of use

1. Basic usage: item fixed height type, vertical scroll (default) demo

It is very simple to use and can be combined with UI libraries such as element-plus or antd-vue and tdesign.

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

2. Set the scroll direction to horizontal demo

     <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>

   Here scrollDirection="horizontal" can set the scroll direction to horizontal.

3. Dynamically control the scroll 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>

// 通过这个函数可以动态设置元素宽高.
const getItemSize = (i: number): number => {
      switch (i % 4) {
        case 1:
          return 80;
        case 2:
          return 50;
        case 3:
          return 100;
        default:
          return 200;
      }
  };

Here getItemSize is a function with the following syntax: (i: number): number , through which the element width and height can be dynamically set.

4. Scroll to the specified element position demo

     <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>

   You can also use scrollToIndex to scroll to specific elements.

5. Scroll to 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>

   You can use the scrollToIndex and scrollToAlignment properties to specify how the scroll element is aligned with the scroll area, there are four options: auto , start , center , end , which correspond to auto-align, end of container, and container, respectively.

6. Scroll to the specified position, the unit is pixel demo

  <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>

You can also use scrollOffset to scroll to a specific position.

7. Support dynamic change data demo

     <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>

   Just dynamically change the bound data .

8. Set the number of extra render elements demo

<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>

Render an additional overscanCount items above/below the visible items. Adjusting it can help reduce scrolling flicker on some browsers/devices.

Component properties and configuration

Attributes	Types of	Is it necessary?	describe
width	Number or String*	✓	The width of the list. It is 'horizontal' in the scrolling direction and is used to determine the number of scrolling elements.
height	Number or String*	✓	List width. In the scroll direction is 'vertical' is used to determine the number of scroll elements.
data	any[]	✓	Build data for scrolling elements
itemSize	(index: number): number		Can be a fixed width/height (depending on the scroll direction), an array containing all elements of the list, or a function that returns the height of the element at the specified position: (index: number): number
scrollDirection	String		Specify scroll direction 'vertical' (default) or 'horizontal' .
scrollOffset	Number		Scroll position can be specified
scrollToIndex	Number		You can specify which element to scroll to
scrollToAlignment	String		Binding scrollToIndex used together, for controlling the alignment of the rolling elements optional:. 'start' , 'center' , 'end' or 'auto' . Use 'start' align the starting position of the container, 'end' . Element is aligned to the end use 'center may be aligned to the middle of the container. 'auto' scrolls to the position where scrollToIndex specifies that the element is just fully visible
overscanCount	Number		The number of additional elements to render above/below visible elements. This can reduce flickering on specific browsers/devices

width can only be of string type when scrollDirection is 'vertical' . Similarly, Height can only be string type when scrollDirection is 'horizontal' *

end

A zero-dependency, short and concise infinite scroll loading library for vue has been introduced. It is not super easy to use, so hurry up and use it. If you have any problems during use, please report it here .