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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
vue实现pdf文档在线预览功能
Nov 26 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 可阅读随机字符串代码
2010/05/26 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php按单词截取字符串的方法
2015/04/07 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
分享几道你可能遇到的python面试题
2017/07/24 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
2016年寒假家长评语
2015/10/10 职场文书
2016新年问候语大全
2015/11/11 职场文书
听课评课活动心得体会
2016/01/15 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js