Vue 实现简易多行滚动"弹幕"效果


Posted in Javascript onJanuary 02, 2020

看一下效果:

Vue 实现简易多行滚动"弹幕"效果 

实现任意行数的定时翻滚效果,不使用重复标签的方式,而是根据展示个数判断是否缺省,并添加对应展示个数的重复项来实现。

Vue 的演示代码如下:

<template>
 <div class="demo-comment-container">
 <div
  class="scroll-container"
  :style="{height: `${height/100}rem`}"
 >
  <ul
  class="scroll-ul"
  :style="{transform: `translate3d(0, ${y/100}rem, 0)`, transition: `${transition}`}"
  >
  <div
   v-for="(item, index) in list"
   :key="index"
   v-bind="baseStyle.style"
   :bgColor="baseStyle.style.bgColor__bg"
   :style="{ color: rgba(baseStyle.color__nf) }"
   :class="['c-item-bg', 'c-item', !item.content && 'empty']"
  >
   <li
   class="c-item"
   >
   <div class="avatar">
    <img
    v-if="item.content"
    class="avatar-item"
    :src="item.photo"
    >
   </div>
   <div
    v-if="item.content"
    class="c-content"
    v-html="item.content"
   />
   </li>
  </div>
  </ul>
 </div>
 <div class="comment-entry">
  <div class="f">
  <div class="text-c">
   <span
   v-if="entry.type === 1"
   class="text"
   v-text="entry.text"
   />
   <div
   v-else
   class="img-container"
   >
   <img :src="entry.image">
   </div>
   <i
   v-if="count"
   class="c-c"
   >{{ count }}</i>
  </div>
  <div>
   <span class="fake-input">来发表你的看法吧~</span>
  </div>
  </div>
 </div>
 </div>
</template>
<script>
export default {
 inject: ['rgba'],
 props: {
 urlConfig: {
  type: Object,
  default: function () {
  return {}
  }
 },
 type: {
  type: String,
  default: 'hot'
 },
 pageSize: {
  type: Number,
  default: 50
 },
 open: {
  type: Boolean,
  default: true
 },
 entry: {
  type: Object,
  default: function () {
  return {
   type: 1, // 1 文字 2 自定义
   text: '',
   image: ''
  }
  }
 },
 number: {
  type: Number,
  default: 2
 },
 },
 data () {
 return {
  count: 2334,
  dom: null,
  height: 0, // 单项高度
  y: 0, // 每次移动距离
  list: [], // 接口列表
  originLength: 0, // 原始数组长度
  transition: 'ease all .4s',
  round: 0 // 需要滚动多少轮
 }
 },
 created () {
 this.getCommentList()
 },
 mounted () {
 this.dom = document.querySelector('.c-item')
 // 计算可视区域高度
 this.height = 64 * this.number + (12 * (this.number - 1))
 },
 methods: {
 getCommentList () {
  // 接口数据
  const _list = []
  this.originLength = _list.length
  const mod = this.originLength % this.number
  let need = this.originLength < this.number ? (this.number - this.originLength) : mod > 0 ? this.number - mod : 0 // 计算出要添加的空白元素个数
  this.list = _list

  // set empty item
  const empty = JSON.parse(JSON.stringify(_list[0]))
  empty.content = ''

  // 补齐空白元素
  while (need) {
  this.list.push(empty)
  need--
  }

  // 填充重复元素
  let repeat = this.number
  let index = 0
  while (repeat) {
  this.list.push(_list[index])
  index++
  repeat--
  }

  this.round = this.list.length / this.number

  this.scroll()
 },
 scroll () {
  let count = 1
  setInterval(() => {
  count++
  this.y -= this.height + 12 // 移动可视区域高度 + 最后一个 item 的 margin-bottom
  this.transition = '.4s ease all'
  setTimeout(() => {
   if (count === this.round) {
   count = 1
   this.transition = ''
   this.y = 0
   }
  }, 800)
  }, 2000)
 }
 }
}
</script>

总结

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

Javascript 相关文章推荐
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
js控制input框只读实现示例
Jan 20 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
vue之nextTick全面解析
May 17 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
JS实现秒杀倒计时特效
Jan 02 #Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 #Javascript
JS实现导航栏楼层特效
Jan 01 #Javascript
JS实现旋转木马轮播图
Jan 01 #Javascript
JS实现普通轮播图特效
Jan 01 #Javascript
javascript实现超好看的3D烟花特效
Jan 01 #Javascript
JavaScript工具库MyTools详解
Jan 01 #Javascript
You might like
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
验证坐标在某坐标区域内php代码
2016/10/08 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
jQuery结合HTML5制作的爱心树表白动画
2015/02/01 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
JavaScript简易计算器制作
2020/01/17 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
自荐信怎么写好
2013/11/11 职场文书
西门豹教学反思
2014/02/04 职场文书
信息技术国培研修日志
2015/11/13 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python