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


Posted in Javascript onNovember 24, 2019

先上图

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;
  },

总结

以上所述是小编给大家介绍的mpvue微信小程序开发之实现一个弹幕评论,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
js实现缓动动画
Nov 25 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 #Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 #Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 #Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 #jQuery
微信小程序实现录音功能
Nov 22 #Javascript
小程序实现按下录音松开识别语音
Nov 22 #Javascript
小程序采集录音并上传到后台
Nov 22 #Javascript
You might like
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
vue-router传参用法详解
2019/01/19 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
分析Python读取文件时的路径问题
2018/02/11 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Django实现文件上传下载
2019/10/06 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
会计专业自我鉴定范文
2013/12/29 职场文书
写给领导的感谢信
2015/01/22 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
java版 联机五子棋游戏
2022/05/04 Java/Android