vue实现公告栏文字上下滚动效果的示例代码

在Vue.js框架中，实现公告栏文字上下滚动的效果，可以通过利用Vue的动态组件和过渡效果来完成。这个功能在许多网页应用中常见，用于展示滚动通知或公告。下面将详细介绍如何使用Vue实现这一效果。 我们需要创建一个新的Vue组件，例如`text-scroll.vue`。在这个组件中，我们将使用`<transition>`标签来处理元素的进入和离开动画。`<transition>`是Vue内置的一个组件，用于定义元素在状态改变时的过渡效果。在这个例子中，我们设置了`name`属性为"slide"，并使用CSS来定义滑动效果。 ```html <template> <div class="text-container"> <transition class="" name="slide" mode="out-in"> <p class="text" :key="text.id">{{text.val}}</p> </transition> </div> </template> ``` 在样式部分，我们定义了`.text-container`、`.text`以及过渡效果的CSS规则，使得文字在滚动时有平滑的动画效果。 接下来，我们需要在`<script>`部分编写组件逻辑。声明`dataList`作为接收父组件传递的公告数据，`count`记录当前显示的公告索引，`intervalId`保存定时器ID，`playTime`定义滚动间隔时间。 ```javascript <script> export default { name: 'TextScroll', props: { dataList: { type: Array, default() { return []; }, }, }, data() { return { count: 0, intervalId: null, playTime: 2000, }; }, // ... }; </script> ``` 在`computed`属性中，我们根据`count`和`dataList`计算出当前应显示的公告文本。 ```javascript computed: { text() { return { id: this.count, val: this.dataList[this.count], }; }, }, ``` 在`created`钩子中，我们启动定时器`setInterval`，每`playTime`毫秒调用一次`getText`方法，以更新公告显示。 ```javascript created() { this.intervalId = setInterval(() => { this.getText(); }, this.playTime); }, ``` `getText`方法负责处理公告的滚动逻辑。如果已到达公告列表末尾，则重置为第一条；否则，索引自增。 ```javascript methods: { getText() { const len = this.dataList.length; if (len === 0) return; if (this.count === len - 1) { this.count = 0; } else { this.count++; } }, }, ``` 在组件销毁时，记得清除定时器，以避免内存泄漏。 ```javascript destroyed() { clearInterval(this.intervalId); } ``` 在需要展示公告滚动的地方，如`header-bar`组件中，我们可以这样使用`text-scroll`组件： ```html <text-scroll :dataList="noticeList"></text-scroll> ``` 在这里，`noticeList`是从父组件传递给`text-scroll`的公告数据列表。 关于`setInterval`和`setTimeout`的区别，`setInterval`会周期性地重复执行一个函数，而`setTimeout`只会在指定的时间后执行一次。在公告滚动场景下，我们需要持续不断地滚动文字，因此选择`setInterval`。然而，如果需要在每次执行之间等待上一次执行完成（例如高耗时操作），则可能需要使用嵌套的`setTimeout`来实现，但这会导致更复杂的管理，并可能导致计时器堆积。在本例中，由于滚动动画是同步进行的，所以使用`setInterval`更为合适。