zdl
f919ce255a
feat: 优化平铺模式的无限滚动触发机制
问题描述:
- 平铺模式下,当容器高度为 800px 但首页内容不足 800px 时
- 无法生成滚动条,导致无限滚动条件永远无法触发
- 用户需要手动翻页才能看到第二页内容
优化方案:
1. 降低滚动触发阈值
- 从 80% 降低到 60%,更早触发下一页加载
- 提升用户滚动体验,减少等待时间
2. 新增主动内容检测机制
- 延迟 500ms 检测虚拟滚动渲染完成后的实际内容高度
- 如果内容高度 ≤ 容器高度(无滚动条),自动加载下一页
- 使用 isLoadingMore ref 防止重复触发
技术实现:
- VirtualizedFourRowGrid.js
- 修改滚动阈值: scrollPercentage > 0.6 (line 78)
- 新增 useEffect 监听 events.length 变化 (lines 90-117)
- 条件判断: scrollHeight <= clientHeight 时主动加载
影响范围:
- 平铺模式 (four-row mode)
测试建议:
1. 切换到平铺模式
2. 观察首页数据少于 6 条时,是否自动加载第二页
3. 验证有足够数据时,滚动到 60% 是否正常触发加载
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-05 09:36:21 +08:00
..
2025-11-05 09:36:21 +08:00
2025-11-05 08:11:30 +08:00
2025-10-27 15:59:13 +08:00
2025-11-05 09:06:02 +08:00