在
Vue 3 中实现
监听滚动触底功能，可以通过自定义指令或使用 `
IntersectionObserver` API 来检测元素是否
滚动到底部。以下是两种常见实现方式：
### 1. 使用自定义指令
监听滚动事件
```
javascript
// main.js
import { createApp } from '
vue'
import App from './App.
vue'
const app = createApp(App)
app.directive('infinite-scroll', {
mounted(el, binding) {
let isLoading = false
const throttleDelay =
200
let lastScrollTime = 0
const handleScroll = () => {
const now = Date.now()
if (isLoading || now - lastScrollTime < throttleDelay) return
const rect = el.getBoundingClientRect()
const offsetBottom = rect.bottom
const threshold = window.innerHeight + document.documentElement.scrollTop + parseInt(binding.arg || '0')
if (offsetBottom <= threshold) {
isLoading = true
lastScrollTime = now
binding.value().then(() => {
isLoading = false
})
}
}
el.__infiniteScrollHandler__ = handleScroll
window.addEventListener('scroll', handleScroll)
},
unmounted(el) {
window.removeEventListener('scroll', el.__infiniteScrollHandler__)
delete el.__infiniteScrollHandler__
}
})
app.mount('#app')
```
在组件中使用该指令：
```
vue
<template>
<div v-infinite-scroll="loadMore">内容区域</div>
</template>
<script>
export default {
methods: {
loadMore() {
// 模拟异步加载数据
return new Promise(resolve => {
setTimeout(() => {
// 加载更多数据逻辑
resolve()
}, 1000)
})
}
}
}
</script>
```
###
2. 使用 `
IntersectionObserver` API 实现
触底检测
```
vue
<template>
<div ref="scrollContainer" class="scroll-container">
<!-- 数据列表 -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div>
<!--
触底检测元素 -->
<div ref="observerTarget" class="observer-target"></div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
observer: null,
count: 0
}
},
mounted() {
this.observer = new
IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
this.loadMore()
}
}, {
rootMargin: '0px',
threshold: 1.0
})
this.observer.observe(this.$refs.observerTarget)
},
beforeUnmount() {
if (this.observer) {
this.observer.disconnect()
}
},
methods: {
loadMore() {
// 模拟异步加载数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.items.push({ id: this.count++, name: `Item ${this.count}` })
}
}, 1000)
}
}
}
</script>
<style scoped>
.scroll-container {
height: 100vh;
overflow-y: auto;
}
.observer-target {
height:
20px;
}
</style>
```
### 参数说明
- `v-infinite-scroll`：绑定加载数据的方法。
- `infinite-scroll-disabled`：控制是否禁用无限
滚动功能。
- `infinite-scroll-distance`：设置触发加载的阈值，单位为像素。
- `infinite-scroll-throttle-delay`：限制
滚动事件触发的频率，防止频繁调用。
以上方法均可在
Vue 3 中实现
监听滚动触底的功能，并结合异步加载数据实现“无限
滚动”效果[^1]。
扫一扫
2104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
