vue如何实现触底加载
Vue 实现触底加载的方法
监听滚动事件
通过监听滚动事件判断是否触底，可以使用 window.addEventListener 或 Vue 的自定义指令。以下是一个基于滚动事件的实现示例：
methods: {
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop + windowHeight >= scrollHeight - 100) {
this.loadMore();
}
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
}使用 Intersection Observer API
Intersection Observer API 更高效，适合现代浏览器。以下是一个实现示例：
data() {
return {
observer: null
};
},
mounted() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.loadMore();
}
}, {
threshold: 0.1
});
this.observer.observe(document.querySelector('#load-more-trigger'));
},
beforeDestroy() {
this.observer.disconnect();
}结合 Vue 自定义指令
封装一个自定义指令，简化触底加载的逻辑：
Vue.directive('load-more', {
inserted(el, binding) {
const callback = binding.value;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
callback();
}
}, {
threshold: 0.1
});
observer.observe(el);
}
});使用指令时，在模板中添加触发元素：
<div v-load-more="loadMore" id="load-more-trigger"></div>使用第三方库
如果需要更复杂的实现，可以考虑使用第三方库如 vue-infinite-loading：
import InfiniteLoading from 'vue-infinite-loading';
export default {
components: {
InfiniteLoading
},
methods: {
loadMore($state) {
fetchData().then(newItems => {
this.items.push(...newItems);
$state.loaded();
if (noMoreData) {
$state.complete();
}
});
}
}
}模板中使用：
<infinite-loading @infinite="loadMore"></infinite-loading>注意事项
- 避免重复触发加载，可以通过锁机制或标志位控制。
- 在移动端需要考虑滚动性能，建议使用 Intersection Observer。
- 加载完成后需要通知组件停止监听或显示提示信息。
