效果
子组件代码
<template>
<view class="content">
<view class="detail_img">
<view class="bottom"></view>
<view class='dmGroup' v-for="(item, index) in unlimitedLogList" :key="index"
:style="{ top: item.top + '%', animationName: 'dmAnimation', animationDuration: item.time + 's', animationTimingFunction: 'linear', animationDelay: index * 3 + 's', animationIterationCount: 'infinite', animationPlayState: 'running' }">
<view class='dmItem'>
<view class='dm'>
<view class='avatarBox'>
<image :src="item.avatar || ''"
class='avatar' mode='aspectFit'></image>
</view>
{{ item.userNickname }}
抽到 
<text class='content'>{{ item.desc }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import type { PropType } from "vue";
import type { Prizeloglist } from "@/models/card-model"
defineProps({
unlimitedLogList: {
type: Array as PropType<Prizeloglist[]>,
defaul: () => []
}
})
</script>
<style lang="scss" >
.detail_img {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
}
.bottom {
width: 100%;
height: 220rpx;
}
.dmGroup {
position: absolute;
top: 80rpx;
left: 100%;
z-index: 10;
animation-timing-function: linear;
animation-fill-mode: none;
transform: translateZ(0);
white-space: nowrap;
height: 65rpx;
}
.dmItem {
display: inline-flex;
margin-right: 60rpx;
white-space: nowrap;
}
.dmItem .dm {
display: inline-flex;
vertical-align: middle;
align-items: center;
position: relative;
height: 65rpx;
line-height: 50rpx;
padding: 0 15rpx 0 15rpx;
box-sizing: border-box;
background: #F2AE58;
border-radius: 45rpx;
overflow: hidden;
font-size: 28rpx;
color: rgba(255, 255, 255, 1);
}
.dmItem .avatarBox {
display: inline-block;
position: relative;
width: 55rpx;
height: 55rpx;
margin-right: 10rpx;
}
.dmItem .avatarBox image {
width: 55rpx;
height: 55rpx;
}
.dmItem .avatarBox .avatar {
width: 50rpx;
height: 50rpx;
border: 0;
border-radius: 50%;
overflow: hidden;
}
.dmItem .dm .content {
display: inline-block;
max-width: 500rpx;
height: 50rpx;
line-height: 50rpx;
margin-right: 10rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
@keyframes dmAnimation {
from {
left: 100%;
}
to {
left: -100%;
}
}
</style>
父组件代码
<Barrage :unlimitedLogList="unlimitedLogList"></Barrage>
const unlimitedLogList: Ref<Prizeloglist[]> = ref([])
//弹幕数据
store.XXXXX(opacity.bagId, 1).then(() => {
unlimitedLogList.value = store.LogList?.map((item, i) => {
const time = Math.floor(Math.random() * 20);
const second = Math.floor(Math.random() * 100);
const _time = time < 10 ? 10 + i : time + i;
const top = Math.floor(Math.random() * 65) + 2;
return {
avatar: item.goodsImgUri,
desc: item.goodsName,
userNickname: item.userNickname,
top,
second,
time: _time,
}
})
});