vue之监听页面滚动实现上拉加载

vue滚动事件scroll

知识点

1.首先获取当前的clientHeight(可视高度), scrollHeight(滚动高度) , 还有scrollTop(距离顶部的高度)
滚动高度 = 可视高度 + 滚动距离顶部的高度 即 scrollHeight = scrollTop + clientHeight

	export default {
		data () {
			return () {
				pageNum: 0,
				flag: false, 
				noMore: false
			}
		},
		methods: {
			getJson (pageNum) {
				// 获取数据
			 	return new primise((resolve, reject) => {
		 			this.$axios.post('xxxx', {参数}).then(res => {
		 				....
		 				resolve(res.status)  // 我们可以根据回调的转态值看是否还有数据
		 			})
			 	}) 
			},
			scrollHandle () {
				// 获取页面页面的滚动高度
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight  
				// 获取页面滚动距离顶部的高度,  window.pageYOffse 兼容苹果
		   	 	let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop  
		    	// 获取页面的可视高度
	    		let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
				 
				// 我们可以在这里判断页面的滚动是否到了底部
				if (scrollTop + clientHeight === scrollHeight) {
					if (this.flag) return 
					this.flag = true
			 		this.pageNum++   // 加载下一页
			 		// 根据noMore 看是否还有数据  默认为false  
			 		if (!this.noMore) {
			 			// 滚动到底部执行数据加载
				 		this.getJson(this.pageNum).then((res) => {
				 			if (res) {
				 			 	// 如果还有数据,不做任何操作
				 			} else {
				 				this.noMore = true // 将this.noMore 设置为true 不在加载获取数据的方法 
				 			}
				 			this.flag = false // 数据加载完成之后放开节流阀
				 		})
			 		}			 		
				 }
				 // 当然我们也可以滚动距离底部还有一定距离的时候执行加载
				 if (scrollTop + clientHeight >= scrollHeight - 20) {
				  		// 距离底部还有20的时候执行数据加载
				  		this.flag = false
				  }
			}
	 	},
	 	destroyed () {
	 		// 页面卸载时移除监听事件
	 		window.removeEventListener('scroll', this.scrollhandle, true)
	 	}
 	}

2.我们应该监听页面的滚动事件

	created () {
		window.addEventListener('scroll', this.scrollHandle, true)
	}

注意: window.addEventListener(‘scroll’, this.scrollHandle, true) 只有页面滚动的时候才会触发
还有页面卸载的时候要移除监听事件 window.addEventListener(‘scroll’, this.scrollHandle, true)