uniapp vue3实现弹幕功能

效果

子组件代码

<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 }}

                        抽到&numsp;

                        <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,

      }



    })

  });