vue指令实现滚动加载
Vue 指令实现滚动加载的方法
自定义指令实现滚动加载
创建一个自定义指令 v-scroll-load，监听滚动事件并在接近底部时触发加载函数。
Vue.directive('scroll-load', {
inserted(el, binding) {
const callback = binding.value;
const options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
callback();
}
});
}, options);
observer.observe(el);
}
});使用方法
在模板中使用自定义指令，绑定加载函数。
<template>
<div>
<div v-for="item in items" :key="item.id">{{ item.content }}</div>
<div v-scroll-load="loadMore"></div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
page: 1
};
},
methods: {
loadMore() {
fetch(`/api/items?page=${this.page}`)
.then(response => response.json())
.then(data => {
this.items = [...this.items, ...data];
this.page++;
});
}
}
};
</script>使用 IntersectionObserver API
IntersectionObserver API 是现代浏览器提供的原生 API，性能优于传统的滚动事件监听。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMore();
}
});
}, { threshold: 0.1 });
observer.observe(document.querySelector('.load-more-trigger'));传统滚动事件监听
如果不支持 IntersectionObserver，可以使用传统滚动事件监听。
window.addEventListener('scroll', () => {
const scrollPosition = window.innerHeight + window.scrollY;
const documentHeight = document.body.offsetHeight;
if (scrollPosition >= documentHeight - 100) {
loadMore();
}
});注意事项
- 确保加载函数是防抖的，避免频繁触发。
- 在组件销毁时移除事件监听或断开观察者。
- 考虑添加加载状态和错误处理。
