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 相关文章推荐
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
详解vue-cli官方脚手架配置
Jul 20 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
微信API接口大全
2015/04/15 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
php查询及多条件查询
2017/02/26 PHP
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
python add_argument()用法解析
2020/01/29 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
职专应届生求职信
2013/11/16 职场文书
个人应聘自我评价分享
2013/11/18 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python
Python函数对象与闭包函数
2022/04/13 Python
mysql如何查询连续记录
2022/05/11 MySQL