Open zhaobinglong opened 3 years ago
created () { // 监听滚动事件 window.addEventListener('scroll', this.onScroll) }, methods: { onScroll () { // 可滚动容器的高度 const innerHeight = document.querySelector('#superList').clientHeight // 屏幕尺寸高度 const outerHeight = document.documentElement.clientHeight // 可滚动容器超出当前窗口显示范围的高度 const scrollTop = document.documentElement.scrollTop // scrollTop在页面为滚动时为0,开始滚动后,慢慢增加,滚动到页面底部时,出现innerHeight <= (outerHeight + scrollTop)的情况,严格来讲,是接近底部。 // console.log('可滚动容器的高度:' + innerHeight, '屏幕尺寸高度:' + outerHeight, '可滚动容器超出当前窗口显示范围的高度:' + scrollTop) if (outerHeight + scrollTop >= innerHeight) { // 加载更多操作 // this.getData() console.log('监听到列表组件到底') this.$emit('onReachBottom') } }, }
mounted () { // 监听滚动事件 window.addEventListener('scroll', this.onScroll) }, // 组件卸载,需要移除scroll监听器 beforeUnmount () { // 移除的时候,必须移除的是同一个函数才可以 window.removeEventListener('scroll', this.onScroll) },
https://www.cnblogs.com/blackbentel/p/11065611.html
列表组件(带loading和empty)
列表触底加载
坑1: 组件卸载的时候需要及时销毁事件
参考
https://www.cnblogs.com/blackbentel/p/11065611.html