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的event详解。
Sep 06 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
浅谈Vue.js
Mar 02 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 Javascript
详解javascript脚本何时会被执行
Feb 05 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP实现文件下载详解
2014/11/27 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
newxtree.js代码
2007/03/13 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
Python实现基本线性数据结构
2016/08/22 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
接受捐赠答谢词
2014/01/27 职场文书
物理教学随笔感言
2014/02/22 职场文书
感恩寄语大全
2014/04/11 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
小学运动会报道稿
2014/10/04 职场文书
2014年销售部工作总结
2014/12/01 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
后进生评语大全
2015/01/04 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书