本文详细的介绍了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标签
这里是动态组件
官方文档:https://cn.vuejs.org/v2/guide/transitions.html
为什么用setInterval,而不是setTimeout
setInterval是循环执行,setTimeout是延迟执行。我们这里要的是setTimeout循环执行。通过嵌套setTimeout可以实现循环,但是每次都会注册一个计时器,然后时间上也是需要等当前setTimeout执行完再延迟比如说两秒执行,实际上就不只2s。
什么情况下setTimeout嵌套可以解决 setInterval 解决不了的问题 当计时器是高耗时的计算或者dom操作时,时间大于延迟时间
到此这篇关于vue实现公告栏文字上下滚动效果的示例代码的文章就介绍到这了,更多相关vue 公告栏文字上下滚动 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“vue实现公告栏文字上下滚动效果的示例代码”评论...
更新动态
2024年05月08日
2024年05月08日
- 原神:技术又升级啦?新增角色动作与神态,期待全方面普及
- 林俊杰.2020-幸存者(EP)【华纳】【WAV+CUE】
- 方志耀.1992-给我一点你的爱【飞碟】【WAV+CUE】
- 华晨宇.2015-异类【天娱传媒】【WAV+CUE】
- 月爱解说 王者荣耀一套带走爆发小狐狸妲己攻略
- 吴宇深《时光》[320K/MP3][61.94MB]
- 吴宇深《时光》[FLAC/分轨][86.52MB]
- 张宇《好男人的情歌 精选16首最爱发烧情歌》[WAV+CUE][600MB]
- 原神虹色大巡回第一关攻略 音符补缺打法位置分享
- 王者荣耀五五朋友星活动玩法介绍 规则一览
- 少年西游记2今日全平台公测 真国潮真轻松真福利
- 崩坏星穹铁道2.2光锥怎么抽 崩铁2.2光锥抽取建议
- 崩坏星穹铁道2.2无边曼舞光锥怎么样 崩铁新四星光锥无边曼舞强度
- 崩坏星穹铁道2.2夜色流光溢彩强度介绍 夜色流光溢彩光锥介绍
- 苹果安装双系统好不好,苹果装双系统好用吗