From 7a3d8937973d8f03b399a2e6315c687ed72b332e Mon Sep 17 00:00:00 2001 From: zerosaturation Date: Fri, 8 May 2026 12:57:04 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=B1=95=E7=A4=BAbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/square/components/WaterfallGrid.vue | 136 ++++++++++++------ frontend/pages/square/config/mockData.js | 2 +- 2 files changed, 90 insertions(+), 48 deletions(-) diff --git a/frontend/pages/square/components/WaterfallGrid.vue b/frontend/pages/square/components/WaterfallGrid.vue index e34f00d..c656249 100644 --- a/frontend/pages/square/components/WaterfallGrid.vue +++ b/frontend/pages/square/components/WaterfallGrid.vue @@ -78,8 +78,8 @@ const GAP = rpx2px(16) const BORDER_W = rpx2px(2) const SCALE = 0.9 const ROWS = 4 -const AUTO_SCROLL_SPEED = 0.5 -const AUTO_RESUME_DELAY = 2500 +const AUTO_SCROLL_SPEED = 0.1 +const AUTO_RESUME_DELAY = 1000 const PRELOAD_THRESHOLD = rpx2px(300) // ========== 状态 ========== @@ -466,21 +466,52 @@ const loadUsers = async () => { try { let items - if (props.useMockData) { - // 使用分类对应的模拟数据 - - const mockData = getMockDataByCategory(props.category) - items = mockData.items - // 更新偏移量 - mockDataOffset = items.length - + // 使用真实API + const res = await getInspirationFlowApi({ limit: 20, type: props.category }) + if (!isComponentMounted) return + if (res.code === 200 && res.data?.items && res.data.items.length > 0) { + items = res.data.items + // 真实接口根据 has_more 决定是否继续加载，has_more 为 false 时追加模拟数据兜底 + if (!res.data.has_more) { + appendFailed = true + if (USE_MOCK_DATA) { + const mockData = getMockDataByCategory(props.category) + const allItems = mockData.items + const batchSize = 20 + const itemsToAdd = [] + for (let i = 0; i < batchSize; i++) { + const sourceIndex = (mockDataOffset + i) % allItems.length + const sourceItem = allItems[sourceIndex] + const newItem = { + ...sourceItem, + asset_id: sourceItem.asset_id * 100 + mockDataOffset + i, + likes: sourceItem.like_count, + } + itemsToAdd.push(newItem) + } + mockDataOffset = mockDataOffset + batchSize + items = [...items, ...itemsToAdd] + } + } } else { - // 使用真实API - const res = await getInspirationFlowApi({ limit: 20, type: props.category }) - - if (!isComponentMounted) return - if (res.code === 200 && res.data?.items) { - items = res.data.items + // 接口没数据时，使用模拟数据兜底 + if (USE_MOCK_DATA) { + const mockData = getMockDataByCategory(props.category) + const allItems = mockData.items + const batchSize = 20 + const itemsToAdd = [] + for (let i = 0; i < batchSize; i++) { + const sourceIndex = (mockDataOffset + i) % allItems.length + const sourceItem = allItems[sourceIndex] + const newItem = { + ...sourceItem, + asset_id: sourceItem.asset_id * 100 + mockDataOffset + i, + likes: sourceItem.like_count, + } + itemsToAdd.push(newItem) + } + mockDataOffset = mockDataOffset + batchSize + items = itemsToAdd } } @@ -518,41 +549,52 @@ const appendMore = async () => { try { let items - if (props.useMockData) { - // 使用模拟数据：循环原始数据 - const mockData = getMockDataByCategory(props.category) - const allItems = mockData.items - const batchSize = 20 - - // 从 mockDataOffset 位置开始取 batchSize 个 - const itemsToAdd = [] - for (let i = 0; i < batchSize; i++) { - const sourceIndex = (mockDataOffset + i) % allItems.length - const sourceItem = allItems[sourceIndex] - // 创建新对象，确保每次都有唯一的 asset_id - const newItem = { - ...sourceItem, - asset_id: sourceItem.asset_id * 100 + mockDataOffset + i, // 确保唯一 - likes: sourceItem.like_count, // 使用原始点赞数 + // 使用真实API + const res = await getInspirationFlowApi({ limit: 20, type: props.category }) + if (!isComponentMounted) return + if (res.code === 200 && res.data?.items && res.data.items.length > 0) { + items = res.data.items + // 真实接口根据 has_more 决定是否继续加载，has_more 为 false 时追加模拟数据兜底 + if (!res.data.has_more) { + appendFailed = true + if (USE_MOCK_DATA) { + const mockData = getMockDataByCategory(props.category) + const allItems = mockData.items + const batchSize = 20 + const itemsToAdd = [] + for (let i = 0; i < batchSize; i++) { + const sourceIndex = (mockDataOffset + i) % allItems.length + const sourceItem = allItems[sourceIndex] + const newItem = { + ...sourceItem, + asset_id: sourceItem.asset_id * 100 + mockDataOffset + i, + likes: sourceItem.like_count, + } + itemsToAdd.push(newItem) + } + mockDataOffset = mockDataOffset + batchSize + items = [...items, ...itemsToAdd] } - itemsToAdd.push(newItem) } - - // 更新偏移量 - mockDataOffset = mockDataOffset + batchSize - - items = itemsToAdd - } else { - // 使用真实API - const res = await getInspirationFlowApi({ limit: 20, type: props.category }) - if (!isComponentMounted) return - if (res.code === 200 && res.data?.items) { - items = res.data.items - // 真实接口根据 has_more 决定是否继续加载 - if (!res.data.has_more) { - appendFailed = true + // 接口没数据时，使用模拟数据兜底 + if (USE_MOCK_DATA) { + const mockData = getMockDataByCategory(props.category) + const allItems = mockData.items + const batchSize = 20 + const itemsToAdd = [] + for (let i = 0; i < batchSize; i++) { + const sourceIndex = (mockDataOffset + i) % allItems.length + const sourceItem = allItems[sourceIndex] + const newItem = { + ...sourceItem, + asset_id: sourceItem.asset_id * 100 + mockDataOffset + i, + likes: sourceItem.like_count, + } + itemsToAdd.push(newItem) } + mockDataOffset = mockDataOffset + batchSize + items = itemsToAdd } } diff --git a/frontend/pages/square/config/mockData.js b/frontend/pages/square/config/mockData.js index 3987663..8c1c245 100644 --- a/frontend/pages/square/config/mockData.js +++ b/frontend/pages/square/config/mockData.js @@ -1,7 +1,7 @@ // ========== 模拟数据配置 ========== // 是否使用模拟数据（开发调试时设为 true，上线后改为 false） -export const USE_MOCK_DATA = false +export const USE_MOCK_DATA = true // 模拟图片列表 const MOCK_IMAGES = [