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 相关文章推荐
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
javascript自执行函数
Feb 10 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python抓取文件夹的所有文件
2018/02/27 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
在C#中如何实现多态
2014/07/02 面试题
电子商务专业实习生自我鉴定
2013/09/24 职场文书
高中的自我鉴定
2013/12/16 职场文书
竞选部长演讲稿
2014/04/26 职场文书
优秀护士先进事迹
2014/05/08 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
英文版辞职信
2015/02/28 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
欧元符号 €
2022/02/17 杂记
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技