更新记录

1.0(2022-03-05)

1.0 第一次上传


平台兼容性

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

漂浮弹幕组件

插件已支持 easycom 规范,直接导入即可使用

小声比比几句:本来插件市场看到有合适的弹幕插件的,但是都是那种全屏飘的,客户要求在指定区域内显示动画,没办法,只能自己手搓一个了。。。

使用方法:

<lemon-barrage
    ref="lemonBarrage"
    class="barrage-view"
    :width="580"
    :height="350"
    :fontSize="34"
    :duration="10"
    direction="right-to-left"
    repeat="infinite"
></lemon-barrage>

barrageArr = [
    {
        avatar:'',// 弹幕发送人头像,可选
        name:'',// 弹幕发送人,可选
        text:'',// 弹幕内容,必须
        color:'',// 弹幕颜色,可选,不传默认随机颜色
        top:'',// 弹幕距离顶部位置,可选,不传默认为在设置高度区域内随机
    }
]
this.$refs.lemonBarrage.start(barrageArr);// 弹幕开始
this.$refs.lemonBarrage.add(barrageArr[0]);// 插入一条弹幕

参数说明:

Props:

参数名 参数类型 必须 参数说明 默认值 可选值
width Number × 弹幕区域宽度 600
height Number × 弹幕区域高度 400
duration Number × 弹幕动画时间,单位/s,数字越大,滚动速度越慢 5
fontSize Number × 弹幕字体大小/头像大小 10
direction Number × 弹幕动画方向,从左到右,或从右到左 left-to-right(从左到右) right-to-left(从右到左)
repeat String|Number × 动画重复次数 1 n(次数),infinite(无限)
minTime Number × 动画开始出现最早时间,单位/s 1
maxTime Number × 动画开始出现最晚时间,单位/s 5

Methods:

方法名 方法说明
end start方法开始动画的数组弹幕全部发送完毕事件

隐私、权限声明

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

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

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

许可协议

MIT协议

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