vue实现弹幕功能


Posted in Javascript onOctober 25, 2019

(1)效果

vue实现弹幕功能

vue实现弹幕功能

如上图所示的效果,这里我们使用vue 制作。

(2)使用技术 vue + vue-baberrage

1.安装:

 npm install vue-baberrage

2.引入

方式一:

import Vue from 'vue'
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)

方式二:

const vueBaberrage = request('vue-baberrage').vueBaberrage

方式三:

<script src="./dist/vue-baberrage.js"></script>

3.使用

HTML

<div id="app">
<vue-baberrage
   :isShow= "barrageIsShow"
   :barrageList = "barrageList"
   :loop = "barrageLoop"
   >
  </vue-baberrage>
</div>

JS

import { MESSAGE_TYPE } from 'vue-baberrage'

export default {
 name: 'app',
 data () {
  return {
   msg: 'Hello vue-baberrage',
   barrageIsShow: true,
   currentId : 0,
   barrageLoop: false,
   barrageList: []
  }
 }, 
 methods:{
  addToList (){
   this.barrageList.push({
    id: ++this.currentId,
    avatar: "./static/avatar.jpg",
    msg: this.msg,
    time: 5,
    type: MESSAGE_TYPE.NORMAL,
   });
 ...

(3)实例演示

这个封装成一个 vue的组件:

<template>
 <div class="barrages-drop">
  <vue-baberrage
   :isShow="barrageIsShow"
   :barrageList="barrageList"
   :maxWordCount="maxWordCount"
   :throttleGap="throttleGap"
   :loop="barrageLoop"
   :boxHeight="boxHeight"
   :messageHeight="messageHeight"
  >
  </vue-baberrage>
 </div>
</template>
<script>
import Vue from 'vue';
import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage';
Vue.use(vueBaberrage);
export default {
 name: 'Barrages',
 data() {
 return {
  msg: '马优晨就是个辣鸡~',
  barrageIsShow: true,
  messageHeight: 3,
  boxHeight: 150,
  barrageLoop: true,
  maxWordCount: 3,
  throttleGap: 5000,
  barrageList: []
 };
 },
 mounted() {
 this.addToList();
 },
 methods: {
 addToList() {
  let list = [
  {
   id: 1,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 3,
   barrageStyle: 'red'
  },
  {
   id: 2,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 8,
   barrageStyle: 'green'
  },
  {
   id: 3,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 10,
   barrageStyle: 'normal'
  },
  {
   id: 4,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 5,
   barrageStyle: 'blue'
  },
  {
   id: 5,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 6,
   barrageStyle: 'red'
  },
  {
   id: 6,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 12,
   barrageStyle: 'normal'
  },
  {
   id: 7,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 5,
   barrageStyle: 'red'
  },
  {
   id: 8,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 5,
   barrageStyle: 'normal'
  },
  {
   id: 9,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 8,
   barrageStyle: 'red'
  },
  {
   id: 10,
   avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',
   msg: this.msg,
   time: 10,
   barrageStyle: 'yellow'
  }
  ];
  list.forEach((v) => {
  this.barrageList.push({
   id: v.id,
   avatar: v.avatar,
   msg: v.msg,
   time: v.time,
   type: MESSAGE_TYPE.NORMAL,
   barrageStyle: v.barrageStyle
  });
  });
 }
 }
};
</script>
<style lang="less">
.barrages-drop {
 .blue {
 border-radius: 100px;
 background: #e6ff75;
 color: #fff;
 }
 .green {
 border-radius: 100px;
 background: #75ffcd;
 color: #fff;
 }
 .red {
 border-radius: 100px;
 background: #e68fba;
 color: #fff;
 }
 .yellow {
 border-radius: 100px;
 background: #dfc795;
 color: #fff;
 }
 .baberrage-stage {
 position: absolute;
 width: 100%;
 height: 212px;
 overflow: hidden;
 top: 0;
 margin-top: 130px;
 }
}
</style>

github地址:

https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md#plugin-options

总结

以上所述是小编给大家介绍的vue实现弹幕功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
围观tangram js库
Dec 28 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 #Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 #Javascript
layui form表单提交后实现自动刷新
Oct 25 #Javascript
jquery实现购物车基本功能
Oct 25 #jQuery
vue中@change兼容问题详解
Oct 25 #Javascript
vue下的@change事件的实现
Oct 25 #Javascript
微信小程序(订阅消息)功能
Oct 25 #Javascript
You might like
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
深入理解php的MySQL连接类
2013/06/07 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
简单了解Python3里的一些新特性
2019/07/13 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Python 私有化操作实例分析
2019/11/21 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
SQL Server实现分页方法介绍
2022/03/16 SQL Server