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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
详解原生JS回到顶部
Mar 25 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP多态代码实例
2015/06/26 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
基于Python测试程序是否有错误
2020/05/16 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
路政管理专业推荐信
2013/11/11 职场文书
远程教育心得体会
2014/01/03 职场文书
关于爱情的广播稿
2014/01/16 职场文书
工程建设实施方案
2014/03/14 职场文书
中学生寄语大全
2014/04/03 职场文书
门球健将观后感
2015/06/16 职场文书
JavaScript实现队列结构过程
2021/12/06 Javascript