vue垂直滚动文字公告效果

原创

已于 2022-08-22 15:25:13 修改 · 2.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #vue

于 2022-08-22 14:19:12 首次发布

本文介绍如何使用Vue.js创建一个垂直滚动的公告栏效果。通过设置CSS样式和JavaScript逻辑，使得第一条消息自动向上滚动，后续消息跟随移动。关键点包括：更新组件属性以触发重绘、数据操作实现内容滚动以及应用过渡效果。示例代码包括两个不同的场景应用，加深了对滚动效果实现的理解。

想做一个垂直滚动的公告栏效果，网上找了好久才找到一个靠谱的，有的不滚动，后来才研究清楚几个关键的知识。

1. 只要把第一个div向上滚动，后面的兄弟div不需要代码控制，它们会自动上移。

2. that.play = false 一定要修改属性，只有修改属性才能触发控件重绘,才会有移动效果。

下面是具体的代码：VerticalScrollText.vue

<template>
    <div id="demo">
        <div class="list">
            <div class ="child" v-for="(item, index) in ulList" :key="item.id" :class="!index && play? 'toUp' : ''">
                 {
  
  { item.msg }} !
            </div>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        setInterval(this.startPlay, 2000)
    },
    data() {
        return {
            ulList: [
                { msg: '这是第一条信息' },
                { msg: '这是第二条信息' },
                { msg: '这是第三条信息' },