uni-app scroll-view 实现循环滚动

### 实现 uni-app 中 scroll-view 组件的无缝循环滚动 为了实现在 `uni-app` 的 `scroll-view` 组件中的无缝循环滚动效果，可以采用设置定时器来自动触发滚动位置的变化，并通过监听滚动事件调整显示的内容。需要注意的是，在实现过程中应避免使用带有 `fixed` 属性的元素以防止视图随页面滚动而移动[^1]。 下面是一个简单的例子展示如何创建一个水平方向上的无限轮播： ```html <template> <view class="container"> <!-- 设置横向滚动 --> <scroll-view class="scroll-view_H" :scroll-x="true" @scroll="handleScroll" :scroll-left="scrollLeft" ref="scrollViewRef" > <block v-for="(item, index) in items.concat(items)" :key="index"> <view class="scroll-item">{{ item }}</view> </block> </scroll-view> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'], // 原始数据项 currentIndex: 0, timer: null, scrollLeft: 0 }; }, mounted() { this.startAutoScroll(); }, methods: { handleScroll(e) { const { detail } = e; let width = Math.round(detail.scrollWidth / (this.items.length * 2)); if ((detail.scrollLeft >= width && !this.isAnimating)) { this.currentIndex++; this.scrollToNext(); } }, scrollToNext() { this.$nextTick(() => { this.scrollLeft += this.$refs.scrollViewRef.offsetWidth; // 更新滚动距离 setTimeout(() => { this.resetPosition(); // 调整回初始状态 }, 50); }); }, resetPosition() { this.scrollLeft -= this.$refs.scrollViewRef.offsetWidth; this.currentIndex %= this.items.length; if (this.timer !== null) clearTimeout(this.timer); this.startAutoScroll(); }, startAutoScroll() { this.timer = setInterval(() => { this.scrollToNext(); }, 3000); // 自动切换时间间隔 } }, beforeDestroy() { clearInterval(this.timer); } }; </script> <style scoped> .container { position: relative; } .scroll-view_H { white-space: nowrap; overflow: hidden; height: 80px; } .scroll-item { display: inline-block; min-width: 100%; text-align: center; line-height: 80px; font-size: 36rpx; } </style> ``` 此代码片段展示了如何利用 Vue.js 和 CSS 来构建一个基本的水平无限轮播功能。这里的关键在于将原始列表重复一次并连接起来形成一个新的数组用于渲染，这样当到达最后一个项目时就可以平滑过渡到第一个项目上从而达到视觉上的连续性。同时设置了定时器每隔一段时间调用方法使容器向右滚动一定宽度的距离模拟自动播放的效果；并且在每次完成一轮完整的动画之后重置当前位置以便继续下一个周期的播放。