-
Notifications
You must be signed in to change notification settings - Fork 36
/
2scroll.html
107 lines (84 loc) · 2.79 KB
/
2scroll.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
<title>loadmore测试2---使用滚动的方法加载更多</title>
<link rel="stylesheet" href="css/weui.css">
</head>
<body>
<div class="content">
<div class="weui_panel weui_panel_access">
<div class="weui_panel_hd">文章列表</div>
<div class="weui_panel_bd js-blog-list">
</div>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script>
$(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 7; /*size*/
var isEnd = false;/*结束标志*/
var isAjax = false;/*防止滚动过快,服务端没来得及响应造成多次请求*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(window).scroll(function(){
console.log(isEnd, isAjax);
/*滚动加载时如果已经没有更多的数据了、正在发生请求时,不能继续进行*/
if(isEnd == true || isAjax == true){
return;
}
// 当滚动到最底部以上100像素时, 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
function getData(offset,size){
isAjax = true;
$.ajax({
type: 'GET',
url: 'json/blog.json'+ '?' + offset + '/' + size, //这里offset,size无作用,仅方便调试
dataType: 'json',
success: function(reponse){
isAjax = false;
var data = reponse.list;
var sum = reponse.list.length;
var result = '';
/************业务逻辑块:实现拼接html内容并append到页面*****************/
//console.log(offset , size, sum);
/*如果剩下的记录数不够分页,就让分页数取剩下的记录数
* 例如分页数是5,只剩2条,则只取2条
*
* 实际MySQL查询时不写这个不会有问题
*/
if(sum - offset < size ){
size = sum - offset;
}
/*使用for循环模拟SQL里的limit(offset,size)*/
for(var i=offset; i< (offset+size); i++){
result +='<div class="weui_media_box weui_media_text">'+
'<a href="'+ data[i].url +'" target="_blank"><h4 class="weui_media_title">'+ data[i].title +'</h4></a>'+
'<p class="weui_media_desc">'+ data[i].desc +'</p>'+
'</div>';
}
$('.js-blog-list').append(result);
/*******************************************/
if ( (offset + size) >= sum){
isEnd = true;
//提示没有了
}
},
error: function(xhr, type){
alert('Ajax error!');
}
});
}
});
</script>
<script src="js/tj.js"></script>
</body>
</html>