xiaoyu/topfans
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增图片无限滚动

Browse Source
This commit is contained in:
zerosaturation 2026-05-22 15:41:39 +08:00
parent c2d58d4924
commit 415d224798
3 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/pages/profile/myWorks.vue
View File

@ -830,9 +830,9 @@ function startLenticularRenderLoop() {
} }
likedLenticularTransformsMap.value = { ...likedLenticularTransformsMap.value, [assetId]: transforms }; likedLenticularTransformsMap.value = { ...likedLenticularTransformsMap.value, [assetId]: transforms };
} }
lenticularRafId = requestAnimationFrame(tick); // lenticularRafId = requestAnimationFrame(tick);
}; };
lenticularRafId = requestAnimationFrame(tick); // lenticularRafId = requestAnimationFrame(tick);
} }
function stopLenticularRenderLoop() { function stopLenticularRenderLoop() {

4
frontend/pages/square/composables/useBanner.js
View File

@ -12,8 +12,8 @@ export function useBanner() {
if (res.code === 200 && res.data?.activities) { if (res.code === 200 && res.data?.activities) {
const activities = res.data.activities const activities = res.data.activities
// 过滤掉已过期的活动 // 过滤掉已过期的活动
bannerActivities.value = activities // bannerActivities.value = activities
// bannerActivities.value = activities.filter(item => item.status !== 'expired') bannerActivities.value = activities.filter(item => item.status !== 'expired')
} }
} catch (e) { } catch (e) {
console.error('[useBanner] 加载 banner 活动失败', e?.message ?? e) console.error('[useBanner] 加载 banner 活动失败', e?.message ?? e)

29
frontend/pages/square/square.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<view class="square-container"> <view class="square-container">
<!-- 可横向滑动的背景 --> <!-- 可横向滑动的背景 - 使用背景图循环实现 -->
<view class="bg-wrapper"> <view
<image class="bg-wrapper"
class="background-fixed" :style="{
:style="{ transform: `translateX(${-bgScrollLeft}px)` }" backgroundImage: `url(/static/square/squearbj1.png)`,
src="/static/square/squearbj1.png" backgroundRepeat: 'repeat-x',
mode="aspectFill" backgroundPosition: `${-bgScrollLeft}px 0`,
/> backgroundSize: `auto 100%`,
</view> }"
></view>
<!-- 横向瀑布流卡片层（内部自带横向滚动） --> <!-- 横向瀑布流卡片层（内部自带横向滚动） -->
<WaterfallGrid <WaterfallGrid
@ -281,17 +282,11 @@ onUnmounted(() => {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 110%; height: 100%;
z-index: 0; z-index: 0;
overflow: hidden;
} }
.background-fixed { /* 已使用 CSS background-image 方式实现循环背景，无需额外样式 */
width: 300%;
height: 110%;
position: relative;
bottom: 4rpx;
}
.nav-mask { .nav-mask {
position: fixed; position: fixed;