<template>
<div class="carousel-container" @mouseenter="stop" @mouseleave="start">
<div class="carousel-wrapper" :style="{ transform: `translateX(${offset}px)` }">
<div v-for="(item, index) in items" :key="index" class="carousel-item">
<!-- 内容 -->
{{ item }}
</div>
</div>
<button @click="scroll(-1)">上一项</button>
<button @click="scroll(1)">下一项</button>
</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const items = ref([/* 数据列表 */]);
const offset = ref(0);
let intervalId;
const scroll = (direction) => {
// 根据需要调整滚动的步长
offset.value = offset.value - direction * 100;
};
const start = () => {
intervalId = setInterval(() => {
scroll(1);
}, 3000); // 每3秒滚动一次
};
const stop = () => {
if (intervalId) {
clearInterval(intervalId);
}
};
onMounted(start);
onUnmounted(stop);
return { items, offset, scroll, start, stop };
}
};
</script>
<style>
.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-wrapper {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
flex: 0 0 100px; /* 根据需要设置宽度 */
/* 样式 */
}
</style>这个简单的例子展示了如何使用Vue 3创建一个无缝滚动的列表。carousel-wrapper 使用 CSS transform 属性来实现平滑滚动。start 和 stop 方法分别用于控制滚动的开始和停止。scroll 方法接受一个方向参数，根据这个参数调整 offset 来实现列表的滚动。这个例子假设每个项的宽度是100像素，可以根据实际需求调整。