<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'const props = defineProps({info: {type: Object,required: true}
})const originalWinners = ref([])
const winners = computed(() => {// 复制原始列表两次以确保足够的项目用于无缝循环return [...originalWinners.value, ...originalWinners.value]
})const test = [{item_id: -1,name: 'test',user_name: 'test',time: '2024-12-16 12:00:00'}, {item_id: -2,name: 'test2',user_name: 'test2',time: '2024-12-16 12:00:00'},]watch(() => props.info, (newVal) => {if (newVal) {
// 原本的数据是从父组件传递过来的，这里先注释掉// originalWinners.value = newVal.scrolling_listoriginalWinners.value = test}
}, { immediate: true, deep: true })const isAnimating = ref(false)
const currentIndex = ref(0)
let timer = nullconst startScroll = () => {timer = setInterval(() => {if (!isAnimating.value) {isAnimating.value = truecurrentIndex.value++if (currentIndex.value >= originalWinners.value.length) {// 当滚动到原始列表的末尾时，在动画结束后重置位置setTimeout(() => {isAnimating.value = falsecurrentIndex.value = 0}, 500) // 与CSS动画持续时间匹配} else {setTimeout(() => {isAnimating.value = false}, 500) // 与CSS动画持续时间匹配}}}, 3000)
}onMounted(() => {startScroll()
})onUnmounted(() => {if (timer) {clearInterval(timer)}
})
</script><template><div class="winners-list"><div class="winners-list-main"><div class="winners-list-container":style="{ transform: `translateY(${-currentIndex * 0.595}rem)` }":class="{ 'animating': isAnimating }"><div v-for="(winner, index) in winners" :key="index"class="winners-list-item">{{ winner.user_name }} Wins {{ winner.name }}</div></div></div></div>
</template><style scoped lang="scss">
.winners-list {width: 6.32rem;height: 1.23rem;border-radius: 0.2rem;margin-top: 0rem;position: absolute;bottom: 0.8rem;left: 50%;transform: translateX(-50%);overflow: hidden;background: url('@/assets/images/christmas/winners-bg.png') no-repeat center center / 100% 100%;background-color: pink;.winners-list-main {width: 5.66rem;height: 0.58rem;position: absolute;top: 50%;left: 0.3rem;transform: translateY(-50%);overflow: hidden;.winners-list-container {will-change: transform;&.animating {transition: transform 0.5s ease;}}.winners-list-item {font-size: 0.32rem;line-height: 0.595rem;color: #fff;font-family: Neuron Bold;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}}
}
</style>话不多说，直接上代码
