Vue3 无限循环滚动 NPM 包开源了

在Vue3生态迎来重要更新之际，vue-loop-scroll作为专为现代Web应用打造的无限循环滚动解决方案正式开源。这个轻量级NPM包通过创新的DOM复用技术，不仅完美支持Vue3的组合式API，更实现了零卡顿的无限滚动效果。相较于传统滚动方案，它在处理万级数据列表时仍能保持60fps的流畅表现，特别适合电商、社交、新闻类应用的开发需求。

通过动态计算可视区域，自动回收不可见元素的DOM节点。这种「视窗锚点」算法可将内存占用降低80%，实测在渲染10000条数据时，内存消耗仅相当于传统方案的1/5。

// 核心滚动监听逻辑
const handleScroll = () => {
  const { scrollTop, clientHeight } = containerRef.value
  const startIdx = Math.floor(scrollTop / itemSize)
  const endIdx = startIdx + Math.ceil(clientHeight / itemSize) + buffer
  visibleData.value = data.slice(startIdx, endIdx)
}

垂直/水平双向滚动
惯性滚动效果优化
自定义滚动步长设置
响应式断点适配

npm install vue-loop-scroll --save

<template>
  <LoopScroll 
    :items="dataList"
    :item-height="60"
    @reach-end="loadMore"
  >
    <template default="{ item }">
      <div class="list-item">{{ item.content }}</div>
    </template>
  </LoopScroll>
</template>

指标	传统方案	vue-loop-scroll
万级列表加载	3.2s	0.8s
内存占用	480MB	92MB
滚动帧率	24fps	60fps

通过ResizeObserver API实现自适应内容高度，完美解决图文混排场景下的高度计算难题。

// uniapp适配示例
import { useLoopScroll } from 'vue-loop-scroll'

export default {
  setup() {
    const { containerRef } = useLoopScroll({
      platform: 'uniapp',
      hybrid: true
    })
    return { containerRef }
  }
}