hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cp活动): 修复苹果端奖励滚动动画闪烁问题

Browse Source
This commit is contained in:
hzj 2026-05-07 18:42:03 +08:00
parent 6da46e8265
commit 8c24cda562
1 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/Ranking/Couple/components/topUser.vue
View File

@ -267,7 +267,7 @@
<div <div
v-for="(item, index) in rewardList" v-for="(item, index) in rewardList"
:key="index" :key="index"
style="align-self: stretch; display: flex; align-items: center; padding: 0 1vw" class="reward-scroll-item"
@click="clickReward(item)" @click="clickReward(item)"
> >
<!-- 预览图 --> <!-- 预览图 -->
@ -275,10 +275,10 @@
v-if="item.cover != ''" v-if="item.cover != ''"
:src="item.cover" :src="item.cover"
alt="" alt=""
style="min-width: 0; display: block; width: 10vw; object-fit: cover" class="reward-scroll-cover"
@error="handleRewardImageError($event, item.type)" @error="handleRewardImageError($event, item.type)"
/> />
<div style="min-width: 0; color: #fff; white-space: nowrap"> <div class="reward-scroll-text">
{{ formatRewardDisplay(item.type, item) }} {{ formatRewardDisplay(item.type, item) }}
</div> </div>
， ，
@ -385,6 +385,7 @@ let rewardRestartTimer = null
let rewardAnimationFrame = null let rewardAnimationFrame = null
let rewardLastFrameTime = 0 let rewardLastFrameTime = 0
let rewardLoopDistance = 0 let rewardLoopDistance = 0
let rewardScrollPosition = 0
const waitForLayoutFrame = () => { const waitForLayoutFrame = () => {
return new Promise((resolve) => { return new Promise((resolve) => {
@ -433,6 +434,7 @@ const restartRewardScroll = async () => {
return return
} }
rewardScrollPosition = 0
viewport.scrollLeft = 0 viewport.scrollLeft = 0
rewardLastFrameTime = performance.now() rewardLastFrameTime = performance.now()
@ -440,10 +442,13 @@ const restartRewardScroll = async () => {
const elapsed = now - rewardLastFrameTime const elapsed = now - rewardLastFrameTime
rewardLastFrameTime = now rewardLastFrameTime = now
const distancePerMs = rewardLoopDistance / 8000 const distancePerMs = rewardLoopDistance / 8000
const nextScrollLeft = viewport.scrollLeft + distancePerMs * elapsed rewardScrollPosition += distancePerMs * elapsed
viewport.scrollLeft = if (rewardScrollPosition >= rewardLoopDistance) {
nextScrollLeft >= rewardLoopDistance ? nextScrollLeft - rewardLoopDistance : nextScrollLeft rewardScrollPosition -= rewardLoopDistance
}
viewport.scrollLeft = rewardScrollPosition
rewardAnimationFrame = requestAnimationFrame(step) rewardAnimationFrame = requestAnimationFrame(step)
} }
@ -516,6 +521,8 @@ onUnmounted(() => {
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
direction: ltr; direction: ltr;
scroll-behavior: auto;
overflow-anchor: none;
} }
.scroll-wrapper { .scroll-wrapper {
@ -529,6 +536,27 @@ onUnmounted(() => {
align-items: center; align-items: center;
} }
.reward-scroll-item {
flex: 0 0 auto;
align-self: stretch;
display: flex;
align-items: center;
padding: 0 1vw;
}
.reward-scroll-cover {
flex: 0 0 auto;
display: block;
width: 10vw;
object-fit: cover;
}
.reward-scroll-text {
flex: 0 0 auto;
color: #fff;
white-space: nowrap;
}
[dir='ltr'] .scroll-content { [dir='ltr'] .scroll-content {
margin-left: 4vw; margin-left: 4vw;
} }