Vue Virtual Waterfall

Overview:

The vue-virtual-waterfall is a Vue 3 virtual waterfall component that allows for the implementation of a virtual list with a fixed height. It is important to specify the height of the container that wraps the VirtualWaterfall component and bind the scrolling event to this container.

Features:

• Virtual: Enable or disable virtual list functionality.
• RowKey: Key used for v-for iteration.
• Gap: Set the gap between each item in the list.
• Padding: Define the padding for the container.
• PreloadScreenCount: Specify how many screens to preload above and below.
• ItemMinWidth: Set the minimum width for each item.
• MaxColumnCount: Define the maximum number of columns.
• MinColumnCount: Specify the minimum number of columns.

Installation:

To install the vue-virtual-waterfall component, you can use the following commands:

pnpm add @lhlyu/vue-virtual-waterfall

After installation, you can locally import the component like this:

import VirtualWaterfall from '@lhlyu/vue-virtual-waterfall'

Or globally import it for use in your Vue application:

import { createApp } from 'vue'
import App from './App.vue'
import VirtualWaterfall from '@lhlyu/vue-virtual-waterfall'

const app = createApp(App)
app.component('VirtualWaterfall', VirtualWaterfall)

Summary:

The vue-virtual-waterfall component for Vue 3 provides a virtual waterfall list feature that needs a fixed container height for proper implementation. It offers various settings like gap, padding, and column count, allowing for customization of the virtual list. It is important to bind the scrolling event to the container to ensure smooth functionality.