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 相关文章推荐
js停止输出代码
Jul 20 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
JavaScript学习笔记(十)
Jan 17 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
JavaScript数值类型知识汇总
2019/11/17 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
python 决策树算法的实现
2020/10/09 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
可口可乐广告词
2014/03/20 职场文书
外国人聘用意向书
2014/04/01 职场文书
红头文件任命书范本
2014/06/05 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Python代码风格与编程习惯重要吗?
2021/06/03 Python
一篇文章学会Vue中间件管道
2021/06/20 Vue.js