更新记录
1.0(2022-03-05)
1.0 第一次上传
平台兼容性
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方法开始动画的数组弹幕全部发送完毕事件 |