微信小程序自定义弹幕
实现思路:定时器 + CSS3
详情在github,欢迎star![点我点我](https://github.com/wuhongwei1/bullet_chat_component)
部分代码:
封装弹幕参数
// 弹幕参数
class Barrage {
constructor(text, top, time, color) { //内容,顶部距离,运行时间,颜色(参数可自定义增加)
this.text = text;
this.top = top;
this.time = time;
this.color = color;
this.display = true;
this.id = i++;
}
}
//弹幕垂直间距
//这里看项目需求可更改弹幕运行行数 目前三行
//记得手动改弹幕的高度
getRandomDistance() {
let that = this;
that.setData({
barrageTop : that.data.barrageTop == 0 ? 35 : that.data.barrageTop == 35 ? 70 : 0
})
return that.data.barrageTop;
},
//弹幕移动速度
getRandomTime() {
let time = [6.5, 7, 7.5, 8, 8.5];
return time[Math.floor(Math.random()*time.length)]
},
// 弹幕字体颜色
getRandomColor() {
let rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
},
ღღღღღღ( ´・ᴗ・)觉得有用的话,请点个赞再走吧!( ´・ᴗ・
)ღღღღღღ