Vue3 虚拟滚动

vue3 虚拟滚动列表，支持无限滚动加载，丝滑流畅的滚动体验

在线演示地址

安装

npm install vue3-virtual-scroll

使用

import { VirtualScroll } from 'vue3-virtual-scroll'
import 'vue3-virtual-scroll/style.css'

<VirtualScroll :list="list" :height="121" :on-touch-end="onTouchEnd">
  <template #default="{ item }">
    <ProductCard :details="item" />
  </template>
</VirtualScroll>

作用域插槽返回了1个字段： item 原始数据

Props 完整参数

参数名	类型	默认值	描述
list	Array	[]	列表数据
grid	Number	1	每一排的数量，默认为1
height	Number	0	每一行的高度，该字段为必填
rowKey	String	id	每一行的唯一key，该字段为必填
loadingText	String	加载中，请稍等	加载时候的文字显示
bufferCount	Number	4	上下的缓冲条数，解决滑动过快时白屏bug
wrapperStyle	Object	{}	列表包裹容器的样式
colSpace	Number	0	列间距
rowSpace	Number	0	行间距
onTouchEnd	Function	function() {}	触底回调函数

onTouchEnd 使用方法

此处模拟了随机拉取失败的情况，返回的错误信息将在底部展示，点击后会重新拉取。需要注意的是在成功后再将页数 +1，否则失败后的重新拉取会出现页数错乱的情况。

function onTouchEnd() {
  return new Promise((resolve, reject) => {
    getList({ page: pageNum, pageSize: 50 }).then((newList) => {
      if (Math.random() > 0.3) {
        list.value.push(...newList)
        pageNum += 1;
        resolve(true)
      }
      else {
        reject(new Error('加载失败，点击重新拉取数据'))
      }
    })
  })
}

Events

事件名称	说明	回调参数
scroll	滚动事件	(startIndex: number, endIndex: number)

Methods

方法名称	说明	参数
scrollToIndex	滚动到索引	(index: number, offset: number)