实现在vue项目中通过滚动条来滑动加载数据_vue根据滚动条显示当前内容

前言：
我使用vue+elementui开发前端页面时，使用elementui自带的滑动加载数据的功能并不是那么好用，于是就有了下面的代码。

1、在页面加载的时候既要初始化页面的数据，又要初始化滑动加载的代码

mounted(){
  this.init ();
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy(){
  window.removeEventListener('scroll', this.handleScroll, false);
},
methods: {
	init () {
      this.oneData={};
      this.dataList=[];
      this.pageNumber=1;
      this.pageSize=10;
      this.pageTotal=0;
      this.getList()
    },
	handleScroll(){
	  // 变量scrollTop是滚动条滚动时，距离顶部的距离
	  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
	  // 变量windowHeight是可视区的高度
	  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
	  // 变量scrollHeight是滚动条的总高度
	  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
	  // 滚动条到底部的条件
	  if (scrollTop + windowHeight - scrollHeight>-10) {
	    if (!this.lastPage) {
	      this.pageNumber += 1 // 页数+1
	        // 重新加载数剧
	        this.getList()
	    }
	  }
	},
	// 获取列表信息
	getList () {
	 this.$http.get('/api/quarterlyreport/page?page='+this.pageNumber+'&limit='+this.pageSize).then(({ data: res }) => {
	   if (res.code !== 0) {
	     return this.$message.error(res.msg)
	   }
	   var list=res.data.list;
	   if(this.pageNumber==1){
	     this.oneData=list[0];
	     this.dataList=list.slice(1,list.length);
	   }else{
	     this.dataList.push(...list);
	   }
	   this.pageTotal=res.data.total;
	   this.lastPage = list.length<this.pageSize;
	 }).catch(() => {})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

2、设置页面高度

.mod-home {
  height: calc(100vh);
}
1
2
3