更新记录

1.04（2024-07-30） 下载此版本

更新readme文件

1.03（2024-07-30） 下载此版本

更新readme文件

1.0.2（2024-07-30） 下载此版本

上传效果图

平台兼容性

uni-app

其他

Zoro-barrage 弹幕组件

特点

1.弹幕区域可自定义，不像市场上其他插件，只能设置top、bottom等大概位置 2.弹幕样式可自定义，弹幕的背景色、弹幕边框色、弹幕背景圆角、字体颜色、大小、图标（包括图标大小）、播放速度 3.可自定义弹幕行数，弹幕最多能有多少行由你决定，且组件会根据使用者设定的弹幕区域高度自动计算最大弹幕行数 4.已处理弹幕堆叠问题，不会出现弹幕堆叠情况 5.不包含第三方库，安全放心使用 6.高性能，非js+dom的方式实现，使用js+canvas+requestAnimationFrame实现，无需担心性能问题

使用方式

1.引入插件 2.在template中直接使用

props

barrageConfig说明

barrageOptions对象示例

{
    options: {
        bgColor: '#000',
        color: '#fff',
        border: '#fff',
        radius: 99, // 圆角最大只能是弹幕的半圆，超过半圆的px值都不生效
        fontSize: 13,
    },
    speed: 1.5, // 弹幕速度，默认1.5
    imgConfig: { // 图标配置（可选）
        width: 30,
        height: 30
    },
    // 图标网络路径（可选）
    imgUrl: 'https://wl-ticket.oss-cn-guangzhou.aliyuncs.com/20240724/d543718067a943449a730596b5cbcae0.png',
    // 弹幕行数（可选，不传则按组件高度计算最大行数展示）
    rowNum: 3 // 弹幕行数会根据barrageConfig.height，计算出组件能显示的弹幕最大行数，如果rowNum超出最大行数，则会根据最大行数展示弹幕
}

完整使用示例

<template>
    <view class="content">
        <Zoro-barrage :barrageConfig="config" ref="barrage"></Zoro-barrage>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                config: {
                    dataList: [],
                    width: 400,
                    height: 200,
                    barrageOptions: {}
                }
            }
        },
        mounted() {

            this.$nextTick(() => {
                // 请在this.$nextTick中设置弹幕配置
                this.config.dataList = ['罗罗诺亚','----------组件--------','欢迎提意见','666666666','9999999999']
                this.config.barrageOptions = {
                    options: {
                        bgColor: '#000',
                        color: '#fff',
                        border: '#fff',
                        radius: 99, // 圆角最大只能是弹幕的半圆，超过半圆的px值都不生效
                        fontSize: 13,
                    },
                    speed: 1.5, // 弹幕速度，默认1.5
                    // imgConfig: { // 图标配置（可选）
                    //  width: 30,
                    //  height: 30
                    // },
                    // 图标网络路径（可选）
                    // imgUrl: 'https://wl-ticket.oss-cn-guangzhou.aliyuncs.com/20240724/d543718067a943449a730596b5cbcae0.png',
                    // 弹幕行数（可选，不传则按组件高度计算最大行数展示）
                    rowNum: 3 // 弹幕行数，但是组件会根据config.height，计算出组件能显示的弹幕最大行数，如果rowNum超出最大行数，则会根据最大行数展示弹幕
                }
            })
            // 模拟接口请求返回弹幕数据
            setTimeout(() => {
                // 可通过组件的prop：barrageConfig传对象，对象的dataList属性放入弹幕数组即可
                this.config.dataList = [`Zoro-barrage————高度自定义化的弹幕组件`]
                setTimeout(() => {
                    // this.config.dataList.push(...[`barrage`]) // 请勿使用push追加dataList，dataList数组是本轮需要渲染的弹幕，不是总弹幕数组
                    this.config.dataList = [`barrage`] // 直接用=赋值即可
                }, 5000)
            }, 1000)

        },
        methods: {

        }
    }
</script>

特殊说明

本插件的实现原理是基于renderjs+canvas，主要解决跨端弹幕问题，使用renderjs是为了解决核心的动画api：requestAnimationFrame在app端不兼容的问题，插件只是粗略测试，发现问题请***联系反馈，或在评论区反馈，作者会不定时收集问题修复，谢谢

：