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小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
vue使用自定义指令实现拖拽
Jan 29 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
基于jQuery实现表格的排序
2016/12/02 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python教程之全局变量用法
2016/06/27 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
python中有关时间日期格式转换问题
2019/12/25 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
创联软件面试题笔试题
2012/10/07 面试题
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书