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)
