笔记-VUE滚动加载更多数据

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