-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path上拉加载下拉刷新.html
82 lines (81 loc) · 3.49 KB
/
上拉加载下拉刷新.html
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
76
77
78
79
80
81
82
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.item{
height: 15vh;
}
</style>
</head>
<body style="margin: 0;padding: 0;">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id='app'>
<div v-if="renderList.length">
<div v-for='item in renderList' class="item">
{{item.name}}
</div>
<div v-show='isBottom'>
到底加载
</div>
</div>
<div v-else>
loading
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
renderList:[],
isBottom:false
},
created(){
window.onscroll = ()=>{
//变量scrollTop是滚动条滚动时，距离顶部的距离
console.log(this.isBottom)
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){
//写后台加载数据的函数
console.log(this.isBottom)
this.isBottom=true
setTimeout(()=>{
for(let i =0;i<10;i++){
if(this.renderList.length<30){
this.renderList.push({name:i})
}
}
this.isBottom=false
},1000)
console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
}
}
},
mounted(){
setTimeout(()=>{
for(let i =0;i<10;i++){
this.renderList.push({name:i})
}
console.log(this.renderList)
},3000)
}
})
</script>
</body>
</html>