<!-- 无线滚动 -->
<script setup>
import { onMounted, reactive, ref } from 'vue';
let data = reactive([]);
// 模拟异步请求数据
const getList =async () => {
await new Promise(res => {
for(let i = 0; i < 10; i++) {
data.push( 'https://images.chuoooo.com/paint/20240310/d9fe0ce0420ee4d30b34ce9891a99d19.jpg!mres')
}
})
}
onMounted(() => {
const observe = new IntersectionObserver((entries) => {
entries.forEach(item => {
if(item.isIntersecting) getList()
})
}, {// 配置参数
root: null,
rootMargin: '10px', // 控制观察区域
threshold: 1.0
})
observe.observe(document.querySelector('.observe'))
})
</script>
<template>
<div >
<div v-for="(item, index) in data" :key="index">
<img :src="item" alt="" style="width: 100px">
<div>{{ item }}</div>
</div>
</div>
<!-- 设置观察者 -->
<div class="observe"></div>
</template>
<style>
</style>
无限滚动(vue3)
于 2024-03-12 13:38:00 首次发布