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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
原生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中将数组转成XML格式的实现代码
2011/08/08 PHP
基于PHP文件操作的详解
2013/06/05 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
股权转让协议书范本
2014/04/12 职场文书
诚信考试倡议书
2014/04/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
文明倡议书
2015/01/19 职场文书
个人欠条范本
2015/07/03 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技