vue虚拟滚动列表vue-virtual-scroller滚动卡顿的问题？

Question

vue虚拟滚动列表vue-virtual-scroller滚动卡顿的问题？

96032192274

项目vue2用到了虚拟滚动列表vue-virtual-scroller，需要用到动态高度组件，DynamicScroller，写完后，发现页面加载不卡顿了，但是这个滚动又很卡顿。不管时拖动滚动条，还是通过滑轮滚动，都有非常明显的卡顿，请问怎么处理？

阅读 220

AI BotBETA

### 回答

针对 `vue-virtual-scroller` 在使用 `DynamicScroller` 时出现的滚动卡顿问题，可以尝试以下几种解决方案：

1. **优化项目性能**：
   - 确保其他部分的代码没有性能瓶颈，比如不必要的复杂计算、大量的数据监听等。
   - 使用 Vue 的性能分析工具（如 Vue DevTools）来检查组件的性能问题。

2. **调整 `vue-virtual-scroller` 的配置**：
   - 检查 `buffer` 配置项，适当调整缓冲区的大小，确保在滚动时不会频繁地重新渲染。
   - 如果列表项高度差异较大，可以尝试调整 `estimateSize` 或确保 `itemHeight` 函数能够更准确地估计高度。

3. **减少渲染复杂度**：
   - 简化列表项的 DOM 结构，减少不必要的嵌套和复杂样式。
   - 使用 CSS 硬件加速特性，如 `transform` 和 `will-change` 属性。

4. **使用防抖/节流技术**：
   - 在滚动事件处理函数中使用防抖（debounce）或节流（throttle）技术，以减少滚动时触发的事件频率。

5. **升级依赖**：
   - 确保 `vue-virtual-scroller` 和 Vue 的版本是最新的，因为新版本可能修复了已知的性能问题。

6. **检查外部因素**：
   - 排除浏览器或设备性能问题，尝试在不同的浏览器和设备上测试。
   - 检查是否有其他 CSS 或 JavaScript 代码影响了滚动性能。

如果上述方法都不能解决问题，可以考虑在 `vue-virtual-scroller` 的 GitHub 仓库中提交 issue，寻求社区的帮助或查看是否有已知的问题和解决方案。

1 个回答

得票最新

Seven

1.2k127

发布于
12 月 18 日广东

更新于
12 月 18 日

根据 GitHub 上的 vue-virtual-scroller 仓库信息，以下是一些主要版本：