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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
export default {
data () {
return {
dataList:new Array,
dataCurPage:1,// 数据页码
loadMore:true,// 第一次加载数据时的正在加载
loadMoreing:true,// 上拉加载数据时的正在加载
}
},
mounted:function(){
let onScroll = window.addEventListener('scroll', this.scrollRun);// 监听滚动
},
methods:{
getdataList:function(){
this.loadMoreing = true;
let _self = this;
$.ajax({
type:"post",
async: false,
timeout : 10000,
dataType:"json",
url:"",
data:{curPage:_self.dataCurPage},
success:function(data){
_self.loadMoreing = false;// 接收到数据时，隐藏正在加载
if(!!data.dataList.length){// 如果有数据
if(_self.dataCurPage==1){// 当加载第1页数据时
_self.dataList = new Array;// 第1页清空数据
if(data.dataList.length>0){// 如果第1页数据条数大于0
data.dataList.forEach(function(ele,i){
_self.dataList.push(ele);// 填充页面数据
})
_self.loadMore = true;// 显示正在加载(在屏幕底部以外)
}else{
_self.loadMore = false;// 没有数据则隐藏正在加载
}
}else{// 当加载第2页及其以后的数据时
if(data.dataList.length>0){
data.dataList.forEach(function(ele,i){
_self.dataList.push(ele);// 填充页面数据
})
_self.loadMore = true;// 显示正在加载(在屏幕底部以外)
}else{
_self.loadMore = false;// 没有数据则隐藏正在加载
}
}
//如果总页数==当前页=>没有更多数据了
if(data.totalPage==_self.dataCurPage){
_self.loadMore = false;
_self.loadMoreing = false;
}
}
},
error:function(xhr,status,error){
console.log("错误",xhr,status,error);
if(status == "timeout"){_self.loadMoreing = false;weui.toast('请求超时', 800);}
},
complete:function(){_self.loadMoreing = false;}
})
},
scrollRun:function(){// 核心代码
if(this.loadMore == true&&!!document.getElementById("loadMore")){//如果总共有一页以上数据，才运行
let bodyWidth = document.body.offsetWidth;
let bodyHeight = window.innerHeight*(375/bodyWidth);// 以6s屏幕为基准比例
let loadMoreTop = document.getElementById("loadMore").getBoundingClientRect().top*(375/bodyWidth);//loadMore距离顶部的距离
if(bodyHeight-loadMoreTop>20){//loadMore被拉出底部20px时
// console.log("bodyHeight",bodyHeight,"loadMoreTop",loadMoreTop,"差值",bodyHeight-loadMoreTop,"页码",this.dataCurPage+1);
this.loadMore = false;//停止运行scrollRun，否则会触发加载所有页面
this.getMoreList(_self.dataCurPage++);
}
}
},
}
}
|
