上拉加载原理

1、实现思路

• 滚定区域是给固定高度, 设置overflow-y:auto来实现

• 触发条件：可视高度 + 滚动高度 >= 实际高度

• • 可视高度：通过dom的offsetHeight获取, 表示区域固定的高度; 但是更加推荐使用getBoundingClientRect()来获取高度, 因为使用前者会引起浏览器回流, 造成一些性能问题

• • 滚动高度：滚动事件中通过e.target.scrollTop获取, 表示滚动条距离顶部的px

• • 实际高度：通过dom的scrollHeight获取, 表示区域内所有内容的高度(包括滚定距离), 也就是实际的高度

2、基础实现

	onScroll(e) {
		let scrollTop = e.target.scrollTop
		let scrollHeight = e.target.scrollHeight
		let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
		let currentHeight = scrollTop + offsetHeight
		if(currentHeight >= scrollHeight) {
			console.log('触底')
		}
	}

3、优化：添加触底距离

• 希望离底部还有一定距离就触发事件, 而不是等到完全触底, 和小程序的onReachBottom差不多

• 声明一个离底部的距离变量reachBottomDistance

• 此时的触发条件为：可视高度 + 滚动距离 + reachBottomDistance >= 实际高度

	export default {
		data() {
			return {
				reachBottomDistance: 100
			}
		},
		methods: {
			onScroll(e) {
				let scrollTop = e.target.scrollTop
				let scrollHeight = e.target.scrollHeight
				let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
				let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
				if(currentHeight >= scrollHeight) {
					console.log('触底')
				}
			}
		}
	}

4、优化：进入后只触发一次

• 在距离底部100px时成功触发事件, 但是由于100px以下的区域是符合条件的, 会导致一直触发, 所以需要做一些处理, 让其进入后只触发一次

	export default {
		data() {
			return {
				isReachBottom: false,
				reachBottomDistance: 100
			}
		},
		methods: {
			onScroll(e) {
				let scrollTop = e.target.scrollTop
				let scrollHeight = e.target.scrollHeight
				let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
				let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
				
				if(currentHeight < scrollHeight && this.isReachBottom){
				  this.isReachBottom = false
				}
				if(this.isReachBottom) return
				
				if(currentHeight >= scrollHeight) {
					this.isReachBottom = true
					console.log('触底')
				}
			}
		}
	}

5、优化：实时获取可变, 不可变缓存

• 实时去获取位置信息会损耗性能, 应该将不变的缓存起来, 只获取实时可变的部分

	export default {
		data() {
			return {
				isReachBottom: false,
				reachBottomDistance: 100,
				scrollHeight: 0,
				offsetHeight: 0
			}
		},
		mounted() {
			// -> 页面加载完成后将高度缓存起来
			let dom = document.querySelector('.list')
			this.scrollHeight = dom.scrollHeight
			this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
		},
		methods: {
			onScroll(e) {
				let scrollTop = e.target.scrollTop
				let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
				if(currentHeight < this.scrollHeight && this.isReachBottom){
				  this.isReachBottom = false
				}
				if(this.isReachBottom) return
				
				if(currentHeight >= this.scrollHeight) {
					this.isReachBottom = true
					console.log('触底')
				}
			}
		}
	}