uni-app 加载长html文本 scroll-view 改上下滑动为左右翻页

### 使用 `scroll-view` 组件实现无限循环滚动 为了实现在 Uni-app 中使用 `scroll-view` 组件达到无限循环滚动的效果，可以借鉴一些技巧和方法。虽然官方文档并没有直接提供关于 `scroll-view` 循环滚动的具体说明[^1]，但是可以通过模拟数据集并巧妙利用 JavaScript 来创建这种体验。 #### 创建虚拟无尽的数据源 首先，在 Vue 数据模型中准备两份相同的内容作为初始渲染项，并将其拼接在一起形成一个看似无穷的数据集合： ```javascript data() { return { items: Array.from({ length: 20 }, (_, i) => ({ id: `${i}`, text: 'Item ' + (i % 10 + 1), })).concat(Array.from({ length: 20 }, (_, i) => ({ // 复制一份相同的数组片段 id: `${i + 20}`, text: 'Item ' + ((i + 20) % 10 + 1), }))), currentIndex: 0, }; } ``` 这里创建了一个由40个条目组成的列表，其中前半部分与后半部分完全一致，以此来制造出一种“循环”的错觉。 #### 动态调整可见区域位置 当用户接近任一端点时（即第一个或最后一个元素），通过编程方式改变 `scroll-view` 的偏移量(`scrollTop`)以及当前索引值 (`currentIndex`) ，使得视觉上看起来像是无缝衔接地继续向下/向上滚动: ```html <template> <view class="container"> <scroll-view :scroll-y="true" @scroll="handleScroll" style="height: 300px;"> <block v-for="(item, index) in visibleItems" :key="index"> <text>{{ item.text }}</text><br/> </block> </scroll-view> </view> </template> <script> export default { computed: { visibleItems(){ const start = this.currentIndex; let end = Math.min(this.items.length - 1, this.currentIndex + 9); if(end === this.items.length - 1 && this.currentIndex >= this.items.length / 2){ setTimeout(() => {this.scrollToTop()}, 50); // 当到达底部且处于下半区时重置顶部 } return this.items.slice(start, end + 1); }, }, methods:{ handleScroll(e){ const offset = e.detail.scrollTop; if(offset <= 0 && this.currentIndex < this.items.length / 2){ this.scrollToBottom(); } this.updateCurrentIndex(offset); }, updateCurrentIndex(scrollOffset){ this.currentIndex = parseInt((scrollOffset / 40).toFixed()); }, scrollToTop(){ this.$nextTick(()=>{ this.scrollViewRef.scrollTo({ top: -(this.items.length * 40)/2, duration: 0 }); this.currentIndex = this.items.length / 2; }) }, scrollToBottom(){ this.$nextTick(()=>{ this.scrollViewRef.scrollTo({ top: (this.items.length * 40)/2, duration: 0 }); this.currentIndex = this.items.length / 2 - 10; }) } } }; </script> ``` 上述代码实现了基本的上下循环滚动逻辑。每当检测到即将触碰边界条件时就会触发相应的处理函数去平滑过渡至另一侧起点处而不打断用户体验流程。 需要注意的是，实际开发过程中可能还需要考虑更多细节优化，比如动画效果、性能调优等方面的问题。