<template>
  <view class="container">
    <scroll-view
      scroll-y
      class="scroll"
      :scroll-top="scrollTop"
      @scroll="onScroll"
      :scroll-with-animation="false"
    >
      <view
        v-for="(item, index) in renderList"
        :key="index"
        class="item"
      >
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 原始数据
const baseList = Array.from({ length: 10 }, (_, i) => `第 ${i + 1} 项`)
const renderList = ref([]) // 显示的3倍数据
const itemHeight = 100 // 每项高度（rpx）需与你样式保持一致
const scrollTop = ref(0)
const totalHeight = baseList.length * itemHeight * 3

onMounted(() => {
  // 三倍复制数据（上下留出空间）
  renderList.value = [...baseList, ...baseList, ...baseList]

  // 滚动到中间（第二组开头）
  nextTick(() => {
    scrollTop.value = baseList.length * itemHeight
  })
})

function onScroll(e) {
  const currentTop = e.detail.scrollTop

  const singleHeight = baseList.length * itemHeight
  const threshold = 20 // 触发回跳的阈值（rpx）

  // 回到中间，形成无缝循环
  if (currentTop <= threshold) {
    scrollTop.value = singleHeight + currentTop
  } else if (currentTop >= singleHeight * 2 - threshold) {
    scrollTop.value = currentTop - singleHeight
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
}
.scroll {
  height: 100%;
}
.item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  background: #fff;
}
</style>
