滚动加载测试指南.md 5.09 KB

Raw Blame History Permalink



周热门资料滚动加载测试指南


Mock 数据说明

已创建 src/utils/mockData.js 文件,用于测试滚动加载更多功能。


Mock 数据特性


✅ 总共 5 页数据,每页 20 条,共 100 条资料
✅ 随机生成的学习人数(100-5000人)
✅ 随机生成的学习百分比(0-100%)
✅ 随机生成的文件大小(0.5MB-10MB)
✅ 随机生成的收藏状态(30%概率已收藏)
✅ 10种文件类型: PDF、Word、Excel、PPT、TXT、图片等
✅ 20种资料名称模板: 涵盖财富管理、保险、投资等主题


模拟网络延迟


每次请求延迟 300-800ms,模拟真实网络环境


如何使用 Mock 数据


方法 1: 修改代码开关(推荐)

在 src/pages/week-hot-material/index.vue 第 76 行:

// ⚠️ MOCK 数据开关 - 设置为 true 使用 mock 数据,false 使用真实 API
const USE_MOCK_DATA = true  // ✅ 使用 Mock 数据
// const USE_MOCK_DATA = false  // ❌ 使用真实 API


方法 2: 直接调用 Mock API

import { mockWeekHotAPI } from '@/utils/mockData'

// 调用 Mock API
const res = await mockWeekHotAPI({ page: 0, limit: 20 })


测试步骤


1. 启动开发服务器

pnpm dev:weapp


2. 导航到周热门资料页

在微信开发者工具中,点击导航到"周热门资料"页面。


3. 测试首次加载


✅ 查看是否加载了第 1 页数据(20条)
✅ 查看 console 日志:[Mock] 生成第0页数据,共20条

✅ 验证列表正常显示


4. 测试滚动加载更多


✅ 向下滚动列表到底部
✅ 等待 300-800ms(模拟网络延迟)
✅ 查看是否显示"加载中..."状态
✅ 查看是否加载了第 2 页数据
✅ 查看 console 日志:[Mock] 生成第1页数据,共20条


5. 测试多页加载

继续滚动,依次测试:


第 3 页: [Mock] 生成第2页数据,共20条

第 4 页: [Mock] 生成第3页数据,共20条

第 5 页: [Mock] 生成第4页数据,共20条


6. 测试数据耗尽


✅ 滚动到底部后,应该显示"没有更多了"
✅ console 日志:[Mock] 生成第5页数据,共0条 (空数据)
✅ hasMore 应该变为 false

✅ 继续滚动不会触发加载


7. 测试收藏功能


✅ 点击任意资料的收藏按钮
✅ 验证收藏状态正确更新
✅ 查看 console 日志:[Week Hot] 收藏状态改变: xxx true/false


验证要点


数据完整性


✅ 每页数据都是 20 条(最后一页除外)
✅ 每条数据包含所有必需字段:


meta_id: 文件ID

name: 文件名称

src: 文件URL

size: 文件大小

read_people_count: 学习人数

read_people_percent: 学习百分比

is_favorite: 收藏状态

extension: 文件扩展名


状态管理


✅ loading 状态: 首次加载时显示
✅ loadingMore 状态: 加载更多时显示
✅ hasMore 状态: 数据耗尽时变为 false
✅ currentPage 状态: 每次加载后正确递增


用户体验


✅ 加载状态友好提示
✅ 空状态提示(第1页无数据时)
✅ 没有更多数据提示
✅ 滚动流畅,无卡顿


Console 日志示例

正常加载流程的日志:

[Week Hot] 页面参数: {}
[Week Hot] 请求参数: {page: 0, limit: 20}
[Week Hot] 使用 Mock 数据: true
[Mock] 生成第0页数据,共20条
[Week Hot] 数据: {list: Array(20)}
[Week Hot] 触底加载更多
[Mock] 生成第1页数据,共20条
[Week Hot] 触底加载更多
[Mock] 生成第2页数据,共20条
...


切换回真实 API

测试完成后,记得切换回真实 API:

// ⚠️ MOCK 数据开关 - 设置为 true 使用 mock 数据,false 使用真实 API
const USE_MOCK_DATA = false  // ✅ 使用真实 API


常见问题


Q1: Mock 数据不生效?

检查:


确认 USE_MOCK_DATA = true

确认已正确导入 mockWeekHotAPI

查看 console 是否有 [Week Hot] 使用 Mock 数据: true


Q2: 滚动不触发加载?

检查:


确认已滚动到列表最底部
查看 hasMore 是否为 true

查看 loadingMore 是否为 false

确认防抖定时器(300ms)已过


Q3: 数据重复?

检查:


确认 isLoadMore 参数正确传递
确认代码中使用的是追加逻辑:
javascript
if (isLoadMore) {
currentList.value = [...currentList.value, ...listData]
}


Q4: 想修改每页数量?

修改 src/pages/week-hot-material/index.vue 第 72 行:

const pageSize = 20  // 修改为你想要的数量,如 10、30 等


扩展 Mock 数据

如需修改 Mock 数据生成逻辑,编辑 src/utils/mockData.js:


修改总页数

const data = generatePageData(page, limit, 10) // 总共10页数据


添加更多资料名称模板

const MATERIAL_TEMPLATES = [
  // ... 现有模板
  '你的新资料名称',
  '另一个新资料名称'
]


修改文件大小范围

function generateRandomSize() {
  const sizeInMB = (Math.random() * 20 + 1).toFixed(1) // 1MB-21MB
  return `${sizeInMB}MB`
}


最后更新: 2026-02-08
维护者: Claude Code