feat(新组件): 弹幕组件
This commit is contained in:
hzj
parent
01e13dbbb9
commit
0c8d8253e7
257
src/components/Lottery/Barrage.vue
Normal file
257
src/components/Lottery/Barrage.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<!-- Barrage.vue 优化版 -->
|
||||
<template>
|
||||
<div
|
||||
style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
|
||||
>
|
||||
<!-- 双行弹幕轨道 -->
|
||||
<div
|
||||
v-for="(track, index) in visibleTracks"
|
||||
:key="index"
|
||||
style="position: absolute; width: 100%; height: 50px"
|
||||
:style="{ top: `calc(${index} * 16vw)` }"
|
||||
>
|
||||
<div
|
||||
v-for="item in track"
|
||||
:key="item.id"
|
||||
class="barrage-item"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
border-radius: 48px;
|
||||
padding: 4px;
|
||||
|
||||
transform: translateX(100vw);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
:style="getBarrageStyle(item)"
|
||||
@animationend="handleAnimationEnd(item.id)"
|
||||
>
|
||||
<img
|
||||
src=""
|
||||
alt=""
|
||||
@error="defaultAvatarUrl"
|
||||
style="
|
||||
width: 10vw;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
"
|
||||
/>
|
||||
<div
|
||||
style="
|
||||
font-weight: 700;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
"
|
||||
:style="{
|
||||
backgroundImage:
|
||||
item.type == 'gift'
|
||||
? '-webkit-linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
|
||||
: '-webkit-linear-gradient(180deg, #A9FFA9 26.92%, #0AED47 52.08%, #B5FFC5 73.08%)',
|
||||
}"
|
||||
>
|
||||
{{ item.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
barrageList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
speed: {
|
||||
type: Number,
|
||||
default: 80, // 基础速度系数
|
||||
},
|
||||
|
||||
maxItems: {
|
||||
type: Number,
|
||||
default: 6, // 每行最大弹幕数
|
||||
},
|
||||
|
||||
loopInterval: {
|
||||
type: Number,
|
||||
default: 2000, // 弹幕生成间隔(ms)
|
||||
},
|
||||
})
|
||||
|
||||
// 弹幕轨道数据
|
||||
const tracks = ref([[], []])
|
||||
// 弹幕ID计数器
|
||||
const idCounter = ref(0)
|
||||
// 当前播放索引（用于循环）
|
||||
const currentIndex = ref(0)
|
||||
|
||||
// 计算实际显示的轨道（过滤空轨道）
|
||||
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
|
||||
|
||||
const defaultAvatarUrl = (e) => {
|
||||
console.log('头像资源出错')
|
||||
e.target.onerror = null //防止循环
|
||||
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
||||
}
|
||||
|
||||
// 获取弹幕样式
|
||||
const getBarrageStyle = (item) => ({
|
||||
animationDuration: `${item.duration}s`,
|
||||
animationDelay: `${item.delay}s`,
|
||||
|
||||
'--start-pos': `${item.startPos}px`,
|
||||
|
||||
border: item.type == 'gift' ? '0.667px solid #FFF677' : '0.667px solid #77FF87',
|
||||
background:
|
||||
item.type == 'gift'
|
||||
? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)'
|
||||
: 'linear-gradient(270deg, rgba(2, 218, 60, 0.60) -16.85%, rgba(0, 124, 54, 0.60) 82.7%)',
|
||||
})
|
||||
|
||||
// 生成随机弹幕属性
|
||||
const generateBarrageProps = (item) => {
|
||||
const textLength = item.text.length
|
||||
return {
|
||||
duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed),
|
||||
startPos: Math.floor(Math.random() * 21) - 10,
|
||||
}
|
||||
}
|
||||
|
||||
// 添加弹幕到轨道
|
||||
const addToTrack = (item) => {
|
||||
// 寻找最短的轨道
|
||||
const trackIndex = tracks.value.reduce(
|
||||
(minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
|
||||
0
|
||||
)
|
||||
|
||||
if (tracks.value[trackIndex].length < props.maxItems) {
|
||||
tracks.value[trackIndex].push({
|
||||
...item,
|
||||
id: idCounter.value++,
|
||||
delay: Math.random() * 4, // 随机延迟（0-4秒）
|
||||
...generateBarrageProps(item),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 清理完成动画的弹幕
|
||||
const cleanCompleted = () => {
|
||||
tracks.value.forEach((track) => {
|
||||
for (let i = track.length - 1; i >= 0; i--) {
|
||||
if (track[i].completed) {
|
||||
track.splice(i, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 弹幕动画结束处理
|
||||
const handleAnimationEnd = (id) => {
|
||||
tracks.value.forEach((track) => {
|
||||
const item = track.find((item) => item.id === id)
|
||||
if (item) item.completed = true
|
||||
})
|
||||
}
|
||||
|
||||
// 获取下一项弹幕（循环逻辑）
|
||||
const getNextBarrage = () => {
|
||||
if (props.barrageList.length === 0) return null
|
||||
|
||||
// 循环获取弹幕
|
||||
const item = props.barrageList[currentIndex.value]
|
||||
currentIndex.value = (currentIndex.value + 1) % props.barrageList.length
|
||||
|
||||
return { ...item } // 返回副本避免污染原始数据
|
||||
}
|
||||
|
||||
// 弹幕循环逻辑
|
||||
let barrageInterval = null
|
||||
const startBarrage = () => {
|
||||
barrageInterval = setInterval(() => {
|
||||
cleanCompleted()
|
||||
|
||||
const nextBarrage = getNextBarrage()
|
||||
if (nextBarrage) {
|
||||
addToTrack(nextBarrage)
|
||||
}
|
||||
}, props.loopInterval)
|
||||
}
|
||||
|
||||
onMounted(startBarrage)
|
||||
onUnmounted(() => clearInterval(barrageInterval))
|
||||
|
||||
// 监听数据源变化
|
||||
watch(
|
||||
() => props.barrageList,
|
||||
(newList) => {
|
||||
// 重置索引，确保重新开始循环
|
||||
currentIndex.value = 0
|
||||
|
||||
// 如果列表为空，停止生成新弹幕
|
||||
if (newList.length === 0) {
|
||||
clearInterval(barrageInterval)
|
||||
} else {
|
||||
// 重启弹幕循环
|
||||
clearInterval(barrageInterval)
|
||||
startBarrage()
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
font-family: 'SF Pro Text';
|
||||
}
|
||||
|
||||
/* 样式保持不变（同之前版本） */
|
||||
.barrage-item {
|
||||
will-change: transform;
|
||||
animation: moveLeft linear forwards;
|
||||
}
|
||||
@keyframes moveLeft {
|
||||
0% {
|
||||
transform: translateX(100vw);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc(-100% - var(--start-pos, 0px)));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,10 @@
|
||||
<img :src="images.pageTitle" alt="" width="100%" style="display: block" />
|
||||
|
||||
<!-- 弹幕 -->
|
||||
<!-- <Barrage></Barrage> -->
|
||||
<Barrage
|
||||
style="width: 100vw; position: relative; left: -10px; margin: 10px 0"
|
||||
:barrageList="barrageList"
|
||||
></Barrage>
|
||||
|
||||
<!-- 模块切换按钮 -->
|
||||
<div style="display: flex; justify-content: space-around">
|
||||
@ -624,7 +627,7 @@ import maskLayer from '@/components/MaskLayer.vue'
|
||||
import { useDebounce, useThrottle } from '@/utils/useDebounce'
|
||||
import { getMemberProfile } from '@/api/wallet'
|
||||
import { useRouter } from 'vue-router'
|
||||
// import Barrage from '@/components/Lottery/Barrage.vue'
|
||||
import Barrage from '@/components/Lottery/Barrage.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@ -640,6 +643,12 @@ const images = Object.fromEntries(
|
||||
})
|
||||
)
|
||||
|
||||
// 弹幕数据（示例）
|
||||
const barrageList = ref([
|
||||
{ text: 'Junge won the jackpot', type: 'gift' },
|
||||
{ text: 'Junge withdrew $10', type: 'doller' },
|
||||
])
|
||||
|
||||
// 奖品数据 (8个位置)
|
||||
const prizes = ref([
|
||||
{ value: '奖品1' },
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user