來源：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)

?

轉載于:https://www.cnblogs.com/laijinquan/p/11107254.html

總結

以上是生活随笔為你收集整理的笔记-VUE滚动加载更多数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。