vue实现公告栏文字上下滚动效果的示例代码


Posted in Javascript onJune 16, 2020

本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,分享给大家,具体入如下:

代码实现:

在项目结构的components中新建text-scroll.vue文件

<template>
 <div class="text-container">
  <transition class="" name="slide" mode="out-in">
   <p class="text" :key="text.id">{{text.val}}</p>
  </transition>
 </div>
</template>

<script>

export default {
 name: 'TextScroll',
 props: {
 dataList: {
  type: Array,
  default() {
  return [];
  },
 },
 },
 data() {
 return {
  count: 0, // 当前索引
  intervalId: null, // 定时器ID
  playTime: 2000, // 定时器执行间隔
 };
 },
 computed: {
 text() {
  return {
  id: this.count,
  val: this.dataList[this.count],
  };
 },
 },
 created() {
 this.intervalId = setInterval(() => { // 定义定时器
  this.getText();
 }, this.playTime);
 },
 methods: {
 getText() {
  const len = this.dataList.length; // 获取数组长度
  if (len === 0) {
  return; // 当数组为空时,直接返回
  }
  if (this.count === len - 1) { // 当前为最后一个时
  this.count = 0; // 从第一个开始
  } else {
  this.count++; // 自增
  }
 },
 },
 destroyed() {
 clearInterval(this.intervalId); // 清除定时器
 },
};
</script>

<style scoped>
.text-container{
 font-size: 14px;
 color: #F56B6B;
 margin-right: 20px;
 height: 60px;
}

.text {
 text-align: right;
 margin: auto 0;
}

.slide-enter-active, .slide-leave-active {
 transition: all 1s;
}

.slide-enter{
 transform: translateY(40px);
}

.slide-leave-to {
 transform: translateY(-40px);
}
</style>

在header-bar组件使用

<text-scroll :dataList="noticeList"></text-scroll>

 分析

transition标签

vue实现公告栏文字上下滚动效果的示例代码

这里是动态组件

官方文档:https://cn.vuejs.org/v2/guide/transitions.html

为什么用setInterval,而不是setTimeout

setInterval是循环执行,setTimeout是延迟执行。我们这里要的是setTimeout循环执行。通过嵌套setTimeout可以实现循环,但是每次都会注册一个计时器,然后时间上也是需要等当前setTimeout执行完再延迟比如说两秒执行,实际上就不只2s。

什么情况下setTimeout嵌套可以解决 setInterval 解决不了的问题 当计时器是高耗时的计算或者dom操作时,时间大于延迟时间

 到此这篇关于vue实现公告栏文字上下滚动效果的示例代码的文章就介绍到这了,更多相关vue 公告栏文字上下滚动 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
JS中常用的正则表达式
Sep 29 Javascript
js时间控件只显示年月
Jan 08 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
原生js实现表格循环滚动
Nov 24 Javascript
原生JS实现无缝轮播图片
Jun 24 #Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 #Javascript
js+css实现全屏侧边栏
Jun 16 #Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 #Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 #Javascript
vue proxy 的优势与使用场景实现
Jun 15 #Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 #Javascript
You might like
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php三元运算符知识汇总
2015/07/02 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php集成动态口令认证
2016/07/21 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python性能优化的20条建议
2014/10/25 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
对python中return与yield的区别详解
2020/03/12 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
HTML5进度条特效
2014/12/18 HTML / CSS
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
写自荐信的七个技巧
2013/10/15 职场文书
大学生就业自荐信
2013/10/26 职场文书
小学班主任培训方案
2014/06/04 职场文书
邀请函模板
2015/02/02 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
mysql数据库实现设置字段长度
2022/06/10 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript