更新记录

1.04(2024-07-30) 下载此版本

更新readme文件

1.03(2024-07-30) 下载此版本

更新readme文件

1.0.2(2024-07-30) 下载此版本

上传效果图

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Zoro-barrage 弹幕组件

特点

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

使用方式

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

props

属性 类型 说明
barrageConfig Object 弹幕配置,所有弹幕相关的配置,包括弹幕数据都在此属性传输,barrageConfig详细属性下面说明

barrageConfig说明

属性 类型 说明
dataList Array 本轮需要发送的弹幕数据,注意!每次接口请求回来的数据,不要push到数组,直接将数据复制给该数组,使用push,会叠加渲染,导致出现重复弹幕
width Number 弹幕组件区域宽度
height Number 弹幕组件区域高度
barrageOptions Object 弹幕组件相关配置(barrageOptions对象详见下文实例代码)

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端不兼容的问题,插件只是粗略测试,发现问题请QQ联系反馈,或在评论区反馈,作者会不定时收集问题修复,谢谢

QQ:1479095488

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问