Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "vue3 infinite scrolling components", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "vue3 infinite scrolling components how to use" article.

What is an infinite scrolling component

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

Unlimited scrolling is a very common mode in e-commerce websites, CMS backend and other applications. Online retailers like this mode of loading products because it allows users to seamlessly browse every product available in a category without having to often pause and wait for the next page to load. [recommended: vue video tutorial]

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

Vue3-infinite-list is a short infinite scrolling component for vue3. It is very small, zero-dependent gzip and only 3kb. Although there are many vue-related infinite scrolling open source components, compared with similar products vue3-infinite-list still has many of its own characteristics, and it is written entirely in vue3 setup api + typescript, the project LOGO is a thousand-legged caterpillar?

Characteristics

Small size-zero dependency-only 3kb after gzipped

Support million-level list rendering, effortlessly

Support scrolling to the specified entry and specifying the initial scroll offset

Various lists that support fixed and variable width / height

List of horizontal layouts that support vertical or

For Vue3 typescript writing

Easy to use and can be combined with all kinds of UI libraries

How to use

Use npm:npm install vue3-infinite-list-- save to use yarn:yarn add vue3-infinite-list to reference import InfiniteList from 'vue3-infinite-list'; {{index + 1}}: {{item}} usage example

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

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

{{index + 1}}: {{item}}

two。 Set the scrolling direction to horizontal demo

Item {{index}} xxxxxxx xxxxxxx Primary

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

3. Dynamically control the rolling height (each item height value is variable) demo

Item {{index}}: {{item}} / / element width and height can be set dynamically through this function. 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 you can dynamically set the width and height of the element.

4. Scroll to the specified element location demo

Item {{index + 1}: {{item}}

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

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

Item {{index + 1}: {{item}}

You can use the scrollToIndex and scrollToAlignment attributes to specify how the scroll element aligns with the scroll area, with four options: auto, start, center, and end, which correspond to automatic alignment, at the beginning of the container, in the middle of the container, and at the end of the container.

6. Scroll to the specified position in pixels demo

Index: {{index + 1}} xxxxxxxxxx Primary Success

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

7. Support for dynamic change data demo

Item {{index + 1}} 2022-05-01 Name: Tom Button Button

You only need to dynamically change the bound data.

8. Set the number of additional render elements demo

{{index + 1}}: {{item}} renders additional overscanCount item on / under the visible item. Adjusting it can help reduce scrolling flicker on some browsers / devices.

Are the properties and configuration property types of the component required? Describes the width of widthNumber or String* ✓ list. In the scrolling direction is' horizontal''is used to determine the number of scrolling elements. HeightNumber or String* ✓ list width. In the scrolling direction, 'vertical' is used to determine the number of scrolling elements. Dataany [] ✓ builds the data itemSize (index: number): number for scrolling elements

It 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 the specified location: (index: number): numberscrollDirectionString

Specify the scroll direction 'vertical' (default) or' horizontal'.scrollOffsetNumber

You can specify the scroll position scrollToIndexNumber

You can specify which element scrollToAlignmentString to scroll to

Used in conjunction with scrollToIndex to control the alignment of scrolled elements. Optional: 'start',' center', 'end' or' auto'. Use 'start' to align to the beginning of the container, and' end' to align to the end of the element. Use 'center to align to the middle of the container.' auto' scrolls to the location where the scrollToIndex specified element is exactly fully visible overscanCountNumber

The number of additional elements rendered on / under visible elements. This reduces flickering on specific browsers / devices. Width can only be string type when scrollDirection is' vertical'. Similarly, Height can only be string when scrollDirection is horizontal' * the above is about "how to use vue3 unlimited scrolling components". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.