vue实现消息无缝滑动

Vue 实现消息无缝滑动的方法

使用 CSS 动画实现基础滑动

通过 CSS 的 transition 或 animation 属性实现消息的平滑移动效果。将消息列表包裹在一个容器中，通过改变容器的 transform 或 margin 属性触发滑动。

<template>
  <div class="message-container">
    <div class="message-list" :style="{ transform: `translateY(${offset}px)` }">
      <div v-for="(msg, index) in messages" :key="index" class="message-item">
        {{ msg }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: ['消息1', '消息2', '消息3'],
      offset: 0,
      animationId: null
    }
  },
  mounted() {
    this.startAnimation()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    startAnimation() {
      const animate = () => {
        this.offset -= 1
        if (Math.abs(this.offset) >= this.messages.length * 30) {
          this.offset = 0
        }
        this.animationId = requestAnimationFrame(animate)
      }
      animate()
    }
  }
}
</script>

<style>
.message-container {
  height: 100px;
  overflow: hidden;
}
.message-list {
  transition: transform 0.1s linear;
}
.message-item {
  height: 30px;
  line-height: 30px;
}
</style>

利用 Vue Transition 组件实现无缝循环

通过 Vue 的 <transition-group> 实现消息的添加和移除动画，配合数据更新实现无限循环效果。当消息移出可视区域时，将其从数组末尾移除并添加到开头。

<template>
  <div class="message-box">
    <transition-group name="slide" tag="div" class="message-list">
      <div v-for="msg in visibleMessages" :key="msg.id" class="message">
        {{ msg.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, text: '消息1' },
        { id: 2, text: '消息2' },
        { id: 3, text: '消息3' }
      ],
      visibleCount: 3,
      currentIndex: 0
    }
  },
  computed: {
    visibleMessages() {
      return this.messages.slice(this.currentIndex, this.currentIndex + this.visibleCount)
    }
  },
  mounted() {
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.messages.length
    }, 1000)
  }
}
</script>

<style>
.message-box {
  height: 90px;
  overflow: hidden;
}
.message-list {
  position: relative;
}
.message {
  height: 30px;
  line-height: 30px;
}
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s;
}
.slide-enter {
  transform: translateY(30px);
  opacity: 0;
}
.slide-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}
</style>

使用第三方库实现高级效果

对于更复杂的需求，可以使用专门处理动画的库如 GSAP 或 anime.js。这些库提供更精细的动画控制和时间轴管理。

<template>
  <div ref="container" class="message-scroller">
    <div v-for="(msg, index) in messages" :key="index" class="message">
      {{ msg }}
    </div>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  data() {
    return {
      messages: ['重要通知1', '重要通知2', '重要通知3']
    }
  },
  mounted() {
    this.initAnimation()
  },
  methods: {
    initAnimation() {
      const tl = gsap.timeline({ repeat: -1 })
      const elements = this.$refs.container.children

      tl.to(elements, {
        y: -30,
        duration: 0.5,
        stagger: 0.2,
        ease: 'power1.inOut'
      })
    }
  }
}
</script>

<style>
.message-scroller {
  height: 30px;
  overflow: hidden;
  position: relative;
}
.message {
  height: 30px;
  line-height: 30px;
}
</style>

性能优化注意事项

对于大量消息或高频更新的场景，需要注意以下性能优化点：

• 使用 will-change: transform 启用硬件加速
• 避免频繁的 DOM 操作，尽量使用 CSS 属性动画
• 对于不可见的消息及时移除或回收 DOM 节点
• 使用 requestAnimationFrame 替代 setTimeout/setInterval

.message-list {
  will-change: transform;
}

移动端适配方案

在移动设备上实现流畅滑动时，需要额外处理触摸事件和惯性滚动：

• 监听 touchstart、touchmove 和 touchend 事件
• 计算触摸位移和速度实现惯性滚动
• 使用 passive: true 提高滚动性能

export default {
  methods: {
    handleTouchStart(e) {
      this.startY = e.touches[0].clientY
    },
    handleTouchMove(e) {
      const deltaY = e.touches[0].clientY - this.startY
      this.offset += deltaY
      this.startY = e.touches[0].clientY
    }
  }
}