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

先上图

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

弹幕区的页面：

      <div class="content" v-show="doommd以诚待人作文ata.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">{{itemdlink初始密码.result.ndmessage}}</span>          </p>       细无声 </div>      </div>

弹幕区的代码逻辑：

// 弹幕参数class doomm {  constructor(result, top, time, color, id) {    //内容，顶部距离，运行时间，颜色,id（参数可自定义增加）    /**     * result数据结构     * faceimage:"",     * bgcolor: "#57b2ff",     * ndmessage: "66666",     * ndtime: "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;  }}//随机字体颜色getveralrandomcolor() {  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 canu = true; // 设置一个开关  return function(item) {    生活常识问答if (!canu) {      return fal;    } // 如果开关已经关掉了就不用往下了    canu = fal; // 利用闭包刚进来的时候关闭开关    ttimeout(() => {      fn(item);      canu = 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;    },