mpvue小程序开发之 实现一个弹幕评论

 

 先上图

就是一个简单的弹幕发送功能

弹幕区的页面：

      <div class="content" v-show="doommdata.length">
        <div class="textleft"></div>
        <div class="textitem">
          <p class="text aon" v-if="item.display" v-for="(item,index) in doommdata" :key="index" :id="item.id" :style="{'animation-duration':item.time+'s', top:item.top+'%',color:'#333',background:item.result.bgcolor}">
            <image :src="item.result.faceimage" class="headimg" />
            <span class="name">{{item.result.name}}:</span>
            <span class="text">{{item.result.sendmessage}}</span>
          </p>
        </div>
      </div>

弹幕区的代码逻辑：

// 弹幕参数
class doomm {
  constructor(result, top, time, color, id) {
    //内容，顶部距离，运行时间，颜色,id（参数可自定义增加）
    /**
     * result数据结构
     * faceimage:"",
     * bgcolor: "#57b2ff",
     * sendmessage: "66666",
     * sendtime: "2019-11-06 15:10:15",
     * name: "eve"
     *
     */
    this.result = result;
    this.top = top;
    this.time = time;
    this.color = color;
    this.display = true;
    this.id = id;
  }
}
//随机字体颜色
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("");
}
//节流函数
function throttle(fn, wait) {
  var canuse = true; // 设置一个开关
  return function(item) {
    if (!canuse) {
      return false;
    } // 如果开关已经关掉了就不用往下了
    canuse = false; // 利用闭包刚进来的时候关闭开关
    settimeout(() => {
      fn(item);
      canuse = true; // 执行完才打开开关
    }, wait);
  };
}
    //添加弹幕列表
    async barragecyclic() {
      await this.arr.foreach((ele, i) => {
        //往弹幕列表里面添加数据
        this.doommlist.push(
          new doomm(
            ele,
            math.ceil(math.random() * 70 + 10),
            math.floor(math.random() * 20 + 10),
            getrandomcolor(),
            i
          )
        );
      });
      this.doommdata = this.doommlist;
    },