vue实现横向无缝滚动
实现横向无缝滚动的思路
横向无缝滚动通常用于展示轮播图或横向列表，核心是通过CSS动画或JavaScript动态调整元素位置，实现循环滚动效果。以下是两种常见实现方式：
CSS动画实现
使用CSS的@keyframes和transform属性实现动画效果，适合简单场景：
<template>
<div class="scroll-container">
<div class="scroll-content">
<div v-for="(item, index) in items" :key="index" class="item">{{ item }}</div>
</div>
</div>
</template>
<style scoped>
.scroll-container {
width: 100%;
overflow: hidden;
}
.scroll-content {
display: flex;
animation: scroll 10s linear infinite;
white-space: nowrap;
}
.item {
flex-shrink: 0;
padding: 0 20px;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
</style>JavaScript动态控制
通过定时器动态修改元素位置，适合需要精确控制的场景：
<template>
<div ref="container" class="scroll-container" @mouseenter="pause" @mouseleave="resume">
<div ref="content" class="scroll-content">
<div v-for="(item, index) in doubledItems" :key="index" class="item">{{ item }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
speed: 2,
animationId: null
}
},
computed: {
doubledItems() {
return [...this.items, ...this.items] // 克隆一份实现无缝衔接
}
},
mounted() {
this.startAnimation()
},
methods: {
startAnimation() {
const container = this.$refs.container
const content = this.$refs.content
let position = 0
const animate = () => {
position -= this.speed
if (position <= -content.scrollWidth / 2) {
position = 0
}
content.style.transform = `translateX(${position}px)`
this.animationId = requestAnimationFrame(animate)
}
animate()
},
pause() {
cancelAnimationFrame(this.animationId)
},
resume() {
this.startAnimation()
}
},
beforeDestroy() {
cancelAnimationFrame(this.animationId)
}
}
</script>
<style scoped>
.scroll-container {
width: 100%;
overflow: hidden;
}
.scroll-content {
display: flex;
}
.item {
flex-shrink: 0;
padding: 0 20px;
}
</style>性能优化建议
使用will-change属性提升动画性能：
.scroll-content {
will-change: transform;
}考虑使用CSS的scroll-snap-type实现分段滚动：
.scroll-container {
scroll-snap-type: x mandatory;
overflow-x: auto;
}
.item {
scroll-snap-align: start;
}注意事项
- 克隆元素时需确保原始数据不变
- 移动端需添加触摸事件支持
- 组件销毁时清除定时器或动画帧
- 动态内容变化时需要重置滚动位置
