【伪】uni-app小程序弹幕动画组件开发实战

未来的路不会比过去更笔直，更平坦，但是我并不恐惧，我眼前还闪动着道路前方野百合和野蔷薇的影子。 ---季羡林-

序

uni-app插件市场有很多弹幕动画组件，但是有很多缺点不兼容多平台，部分组件导入后无法使用等问题

对于新手来说手搓一个真正的弹幕是十分困难的，并且还要解决多平台和开箱即用；只能走另类思路，全程使用css动画，最大兼容[uni-app小程序弹幕动画组件开发实战]

逻辑

1.用户模拟弹幕数据数组

2.把数组平均分成设定份数

3.每一份flex布局从最右边滚动到最左边

预览

使用方式

引入页面组件

<template>
    <view>
        <!-- 使用弹幕组件 -->
        <Danmaku :danmakuList="danmakuList" :trackCount="3" />
    </view>
</template>

js导入

<script>
// 导入弹幕组件
import Danmaku from '../../components/Danmaku.vue';
export default {
    components: {
        Danmaku
    },
    data() {
        return {
            // 弹幕内容数组 - 包含头像、名称和弹幕内容
            danmakuList: [
                { id: 1, username: '小明', avatar: '/static/logo.png', comment: '这个视频太精彩了！' },
                { id: 2, username: '小红', avatar: '/static/logo.png', comment: '主播好厉害！' },
                { id: 3, username: '小李', avatar: '/static/logo.png', comment: '学到了很多知识' },
                { id: 4, username: '小张', avatar: '/static/logo.png', comment: '支持一下' },
                { id: 5, username: '小王', avatar: '/static/logo.png', comment: '666666' },
                { id: 6, username: '小刚', avatar: '/static/logo.png', comment: '太赞了！' },
                { id: 7, username: '小丽', avatar: '/static/logo.png', comment: '感谢分享' },
                { id: 8, username: '小强', avatar: '/static/logo.png', comment: '期待下一期' },
                { id: 9, username: '小美', avatar: '/static/logo.png', comment: '干货满满' },
                { id: 10, username: '小华', avatar: '/static/logo.png', comment: '太棒了，收藏了！' }
            ]
        }
    }
}

源码下载

https://www.123865.com/s/SmZtVv-l0cgh