本文詳細的介紹了vue實現公告欄文字上下滾動效果的示例代碼，分享給大家，具體入如下：

代碼實現：

在項目結構的components中新建text-scroll.vue文件

<template> <div class='text-container'> <transition class='' name='slide' mode='out-in'> <p :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 公告欄文字上下滾動 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！