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 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
javascript RegExp 使用说明
May 21 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
JS中常用的消息框总结
Feb 24 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
谈一谈收音机的高放电路
2021/03/02 无线电
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php基础学习之变量的使用
2011/06/09 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
Python新手入门最容易犯的错误总结
2017/04/24 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python怎么删除缓存文件
2020/07/19 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
户外亲子活动策划方案
2014/02/07 职场文书
公立医院改革实施方案
2014/03/14 职场文书
继承公证书格式
2015/01/26 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
opencv检测动态物体的实现
2021/07/21 Python