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工具 Cookie 封装
Aug 21 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
理解javascript正则表达式
Mar 08 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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.MVC的模板标签系统(四)
2006/09/05 PHP
正则表达式语法
2006/10/09 Javascript
生成php程序的php代码
2008/04/07 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python解析json实例方法
2013/11/19 Python
python比较两个列表是否相等的方法
2015/07/28 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python输出数学符号实例
2020/05/11 Python
Python调用飞书发送消息的示例
2020/11/10 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
公司办公室岗位职责
2014/03/19 职场文书
爱心捐书活动总结
2014/07/05 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
公司市场部岗位职责
2015/04/15 职场文书
学生会干部任命书
2015/09/21 职场文书
军训决心书范文
2015/09/22 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android