来源:https://blog.csdn.net/qq_17281881/article/details/87342403
VUE滚动加载更多数据
1 data() { 2 return { 3 loading: false, 4 loadingMore: false,//loading 加载更多 5 isScroll: true,//是否可以滚动 6 pageIndex: 1, 7 pageSize: 10, 8 list: [], 9 } 10 }, 11 12 mounted() { 13 document.addEventListener('scroll', this.scrollMoreData, false) 14 }, 15 16 methods: { 17 scrollMoreData() { 18 const scrollTopHeight = document.documentElement.scrollTop || document.body.scrollTop //滚动高度 19 const clientHeight = document.documentElement.clientHeight || window.screen.availHeight //屏幕可用工作区高度 20 const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight //网页可见区域高(包括边线的宽) 21 // console.log(scrollTopHeight, clientHeight, scrollTopHeight + clientHeight + 50, offsetHeight) 22 23 if ((scrollTopHeight + clientHeight) + 50 >= offsetHeight && this.isScroll) { 24 this.isScroll = false 25 this.loadingMore = true 26 let pageNo = this.pageIndex += 1 27 api.Get('/list', { 28 pageIndex: pageNo, 29 pageSize: this.pageSize, 30 }).then(res => { 31 this.loadingMore = false 32 if (res.data.list.length > 0) { 33 this.isScroll = true 34 this.list = [...this.list, ...res.data.list] 35 } else { 36 this.show = true 37 } 38 }) 39 } 40 }, 41 }, 42 }, 43 44 destroyed() { 45 document.removeEventListener('scroll', this.scrollMoreData, false)