当前位置：首页 > VUE

vue实现文字向上滚动

2026-01-20 19:07:01VUE

vue实现文字向上滚动的方法

使用Vue实现文字向上滚动效果可以通过多种方式实现，以下是几种常见的方法：

使用CSS动画实现

通过CSS的animation和transform属性结合Vue的模板绑定实现滚动效果：

vue实现文字向上滚动

<template>
  <div class="scroll-container">
    <div class="scroll-content" :style="{ transform: `translateY(${translateY}px)` }">
      <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['内容1', '内容2', '内容3', '内容4'],
      translateY: 0,
      scrollSpeed: 30
    }
  },
  mounted() {
    this.startScroll()
  },
  methods: {
    startScroll() {
      setInterval(() => {
        this.translateY -= 1
        if (Math.abs(this.translateY) >= this.scrollSpeed) {
          this.translateY = 0
          this.items.push(this.items.shift())
        }
      }, 50)
    }
  }
}
</script>

<style>
.scroll-container {
  height: 100px;
  overflow: hidden;
  position: relative;
}
.scroll-content {
  transition: transform 0.5s ease;
}
</style>

使用Vue的过渡动画

利用Vue的<transition-group>组件实现平滑的滚动过渡：

<template>
  <div class="scroll-box">
    <transition-group name="scroll" tag="div">
      <div v-for="item in items" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '第一条消息' },
        { id: 2, text: '第二条消息' },
        { id: 3, text: '第三条消息' }
      ],
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.items.push(this.items[0])
      this.items.shift()
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style>
.scroll-box {
  height: 150px;
  overflow: hidden;
}
.item {
  height: 50px;
  line-height: 50px;
}
.scroll-move {
  transition: transform 1s;
}
</style>

使用第三方库vue-seamless-scroll

对于更复杂的需求，可以使用专门为Vue开发的滚动插件：

vue实现文字向上滚动

安装插件：
```
npm install vue-seamless-scroll
```

在组件中使用：


<template>
<vue-seamless-scroll 
 :data="list" 
 :class-option="option" 
 class="seamless-wrap"
>
 <ul>
   <li v-for="(item, index) in list" :key="index">
     {{ item.title }}
   </li>
 </ul>
</vue-seamless-scroll>
</template>

import vueSeamlessScroll from 'vue-seamless-scroll' export default { components: { vueSeamlessScroll }, data() { return { list: [ { title: '新闻1' }, { title: '新闻2' }, { title: '新闻3' } ], option: { direction: 1, step: 0.5, limitMoveNum: 3, hoverStop: true } } } } .seamless-wrap { height: 200px; overflow: hidden; } ```