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 相关文章推荐
js模拟hashtable的简单实例
Mar 06 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 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
PHP字符串处理的10个简单方法
2010/06/30 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
python定时器使用示例分享
2014/02/16 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
创业计划书模版
2014/02/05 职场文书
捐资助学倡议书
2014/04/15 职场文书
介绍信的格式
2015/01/30 职场文书