小程序自定义弹幕

微信小程序自定义弹幕

实现思路：定时器 + 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('')
  },

ღღღღღღ( ´･ᴗ･)觉得有用的话，请点个赞再走吧！( ´･ᴗ･ )ღღღღღღ