监听页面滑动到底部
- IntersectionObserver
- [scroll 事件监听器](#scroll 事件监听器)
IntersectionObserver
在 Vue 中监听触底可以通过使用IntersectionObserver
实现。IntersectionObserver
是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时,会触发IntersectionObserver的回调函数。
以下是一个监听触底的示例:
vue
<template>
<div class="container" ref="container">
<!-- 这里是数据列表 -->
</div>
</template>
<script>
export default {
data() {
return {
observer: null,
}
},
mounted() {
// 创建 IntersectionObserver 实例
this.observer = new IntersectionObserver(this.handleObserve, {
root: null,
rootMargin: '0px',
threshold: 1.0,
});
// 监听容器底部
this.observer.observe(this.$refs.container.lastChild);
},
methods: {
handleObserve(entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 滚动到底部触发加载更多
this.loadMoreData();
}
});
},
loadMoreData() {
// 加载更多数据的逻辑
},
},
};
</script>
在mounted钩子函数中创建IntersectionObserver实例,并监听容器底部的元素。在handleObserve回调函数中判断当前元素是否可见,如果可见则触发加载更多数据的逻辑。
scroll 事件监听器
在 Vue 中监听页面滑动到底部的方法如下:
- 创建一个
scroll
事件监听器,并将事件绑定在根元素上(window
或document.body
)。
js
mounted() {
window.addEventListener('scroll', this.handleScroll)
}
- 在事件处理函数
handleScroll
中,判断页面滚动到底部的条件,如果条件成立,执行自定义事件scroll-to-bottom
。
js
methods: {
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
const clientHeight = document.documentElement.clientHeight || window.innerHeight
if (scrollTop + clientHeight >= scrollHeight) {
this.$emit('scroll-to-bottom')
}
}
}
- 在需要监听滚动到底部的组件中,使用
$on
方法监听自定义事件scroll-to-bottom
,并执行相应的操作。
html
<template>
<div>
<div v-for="item in list" :key="item.id">{{ item.text }}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: []
}
},
mounted() {
this.loadMore()
this.$on('scroll-to-bottom', this.loadMore)
},
methods: {
loadMore() {
// TODO: 加载更多数据
}
}
}
</script>