vue2：横向无限轮播

在这里插入图片描述

子组件

<template><div class="infinite-scroll" ref="scrollContainer"><div class="scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }"><div v-for="(item, index) in displayItems" :key="index" class="scroll-item" style="margin-right: 20px;">{{ item }}</div></div></div>
</template><script>
export default {name: 'InfiniteScroll',props: {items: {type: Array,required: true}},data() {return {scrollPosition: 0,animationFrame: null,displayItems: [],itemWidth: 0,containerWidth: 0}},mounted() {// 复制数组以实现无缝滚动this.displayItems = [...this.items, ...this.items, ...this.items]this.$nextTick(() => {this.initScroll()})},beforeUnmount() {if (this.animationFrame) {cancelAnimationFrame(this.animationFrame)}},methods: {initScroll() {// 获取单个item的宽度（包含margin）const firstItem = this.$el.querySelector('.scroll-item')if (firstItem) {this.itemWidth = firstItem.offsetWidth+20 // 20是margin-right的值this.containerWidth = this.$refs.scrollContainer.offsetWidththis.startScroll()}},startScroll() {const scroll = () => {this.scrollPosition -= 1// 当滚动到第二组数据时，重置到第一组相同位置if (Math.abs(this.scrollPosition) >= this.itemWidth * this.items.length) {this.scrollPosition = 0}this.animationFrame = requestAnimationFrame(scroll)}this.animationFrame = requestAnimationFrame(scroll)}}
}
</script><style lang="scss" scoped>
.infinite-scroll {width: 100%;height: 52px;overflow: hidden;position: relative;.scroll-content {display: flex;position: absolute;white-space: nowrap;will-change: transform;.scroll-item {height: 52px;background: rgba(0, 0, 0, 0.3);border-radius: 26px;padding: 0 30px;color: #DCEBFF;font-size: 24px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;}}
}
</style>

父组件

<template><div class="draw"><!-- 横线无限滚动 --><infinite-scroll :items="scrollItems" /></div>
</template><script>import InfiniteScroll from '@/components/InfiniteScroll.vue'export default {components: {InfiniteScroll},data() {return {scrollItems: ['恭喜用户获得奖品1','恭喜用户获得奖品2','恭喜用户获得奖品3','恭喜用户获得奖品4',]}}}
</script>