73 lines
1.6 KiB
Vue
73 lines
1.6 KiB
Vue
<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>
|