Vue组件实现触底判断

最新推荐文章于 2024-08-09 11:20:59 发布

Sallywa

最新推荐文章于 2024-08-09 11:20:59 发布

阅读量3.4k

点赞数 1

本文链接：https://blog.csdn.net/Sallywa/article/details/89674985

版权

本文介绍了一个简单的Vue组件实现触底判断的方法，通过在子组件中检测滚动位置，当达到页面底部时调用父组件传递的回调函数。在父组件中，将子组件置于底部并利用其进行触底判断。文中提到，为了防止频繁触发，子组件应当添加函数节流以限制回调函数的执行次数。

摘要由CSDN通过智能技术生成

非常简陋的代码，以后有空回来完善

子组件代码

<template>
	<div class="scroll"></div>
</template>

<script>
	export default {
		name:'Scroll',
		methods:{
			scrollEvent(){
				if (document.documentElement.scrollTop
                     + document.documentElement.clientHeight 
                    >= document.body.scrollHeight) {
					this.onBottom();
				}
			}
		},
		props:{
			onBottom:Function
		},
		mounted(){
			window.addEventListener('scroll', this.scrollEvent,false);
		},
		destroyed () {
	        window.removeEventListener('scroll', this.scrollEvent,false);
	    }
	}
</script>

document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeightb表示已经到页面底部了，那么就触发函数onBottom，函数onBottom是父组件传递过来的用于回调的函数

父组件代码：

把子组件scroll放在父组件的底部（切记，不然函数不起作用），