feat: 新增图片无限滚动

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

View File

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

View File

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

View File

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