易语言开发网站百家号权重查询站长工具
监听页面滑动到底部
- IntersectionObserver
- scroll 事件监听器
IntersectionObserver
在 Vue 中监听触底可以通过使用IntersectionObserver实现。IntersectionObserver是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时，会触发IntersectionObserver的回调函数。
以下是一个监听触底的示例：
<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）。
mounted() {window.addEventListener('scroll', this.handleScroll)
}
- 在事件处理函数
handleScroll中，判断页面滚动到底部的条件，如果条件成立，执行自定义事件scroll-to-bottom。
methods: {handleScroll() {const scrollTop = document.documentElement.scrollTop || document.body.scrollTopconst scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeightconst clientHeight = document.documentElement.clientHeight || window.innerHeightif (scrollTop + clientHeight >= scrollHeight) {this.$emit('scroll-to-bottom')}}
}
- 在需要监听滚动到底部的组件中，使用
$on方法监听自定义事件scroll-to-bottom，并执行相应的操作。
<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>