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 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
js获取和设置属性的方法
Feb 20 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
微信小程序中显示倒计时代码实例
May 09 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学习笔记之 函数声明(二)
2011/06/09 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Python fileinput模块使用实例
2015/05/28 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
Python 含参构造函数实例详解
2017/05/25 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python 字符串只保留汉字的方法
2018/11/16 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
python-地图可视化组件folium的操作
2020/12/14 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
区优秀教师事迹材料
2014/02/10 职场文书
报名委托书
2015/01/29 职场文书
2015年端午节活动总结
2015/02/11 职场文书
上课迟到检讨书
2015/05/06 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL