项目的一个前端页面展示已购买商品时，要求能下拉加载更多。关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。
但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。
h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。
基于按钮实现加载更多
最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。
效果如下：
页面html：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
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
class
=
"js-load-more"
>加载更多</
div
>
</
div
>
<
script
src
=
"js/zepto.min.js"
></
script
>
|
加载更多按钮样式：loadmore.css:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
@charset
"utf-8"
;
.js-load-more{
padding
:
0
15px
;
width
:
120px
;
height
:
30px
;
background-color
:
#D31733
;
color
:
#fff
;
line-height
:
30px
;
text-align
:
center
;
border-radius:
5px
;
margin
:
20px
auto
;
border
:
0
none
;
font-size
:
16px
;
display
:
none
;
/*默认不显示，ajax调用成功后才决定显示与否*/
}
|
加载更多的js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(
function
(){
/*初始化*/
var
counter = 0;
/*计数器*/
var
pageStart = 0;
/*offset*/
var
pageSize = 4;
/*size*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(document).on(
'click'
,
'.js-load-more'
,
function
(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
});
|
这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码，负责从服务端拉去数据。这里给个示例：
|
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
|
function
getData(offset,size){
$.ajax({
type:
'GET'
,
url:
'json/blog.json'
,
dataType:
'json'
,
success:
function
(reponse){
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);
/*******************************************/
/*隐藏more按钮*/
if
( (offset + size) >= sum){
$(
".js-load-more"
).hide();
}
else
{
$(
".js-load-more"
).show();
}
},
error:
function
(xhr, type){
alert(
'Ajax error!'
);
}
});
}
|
还是比较简单的。
基于滚动事件实现加载更多
上面我们通过按钮点击实现加载更多，整体过程还是比较简单的。这里，我提供另一种方法实现加载更多：基于于滚动(scroll)事件。
直接贴代码了：
|
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
|
$(
function
(){
/*初始化*/
var
counter = 0;
/*计数器*/
var
pageStart = 0;
/*offset*/
var
pageSize = 7;
/*size*/
var
isEnd =
false
;
/*结束标志*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
$(window).scroll(
function
(){
if
(isEnd ==
true
){
return
;
}
// 当滚动到最底部以上100像素时， 加载新内容
// 核心代码
if
($(document).height() - $(
this
).scrollTop() - $(
this
).height()<100){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
}
});
});
|
可以看出，代码变化不大，主要看核心代码里的判断条件：当滚动到最底部以上100像素时， 加载新内容。
业务逻辑getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的逻辑改成：
|
1
2
3
|
if
( (offset + size) >= sum){
isEnd =
true
;
//没有更多了
}
|
就行了。
当然，这里面还有要优化的地方，例如：如何防止滚动过快，服务端没来得及响应造成多次请求？
综合实例
通过上面的例子，显然第二种更好，不用去点击。但是第二个方法有个问题：
如果设置页面大小每次显示2条或3条(size=2)，总记录是20，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。
因此，我们可以把以上两种方法合在一起：
默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。
这里，我对加载更多这个行为进行简单的抽象，写了个简单的插件：
loadmore.js
|
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
|
/*
* loadmore.js
* 加载更多
*
* @time 2016-4-18 17:40:25
* @author 飞鸿影~
* @email jiancaigege@163.com
* 可以传的参数默认有：size,scroll 可以自定义
* */
;(
function
(w,$){
var
loadmore = {
/*单页加载更多 通用方法
*
* @param callback 回调方法
* @param config 自定义参数
* */
get :
function
(callback, config){
var
config = config ? config : {};
/*防止未传参数报错*/
var
counter = 0;
/*计数器*/
var
pageStart = 0;
var
pageSize = config.size ? config.size : 10;
/*默认通过点击加载更多*/
$(document).on(
'click'
,
'.js-load-more'
,
function
(){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
});
/*通过自动监听滚动事件加载更多,可选支持*/
config.isEnd =
false
;
/*结束标志*/
config.isAjax =
false
;
/*防止滚动过快，服务端没来得及响应造成多次请求*/
$(window).scroll(
function
(){
/*是否开启滚动加载*/
if
(!config.scroll){
return
;
}
/*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
if
(config.isEnd ==
true
|| config.isAjax ==
true
){
return
;
}
/*当滚动到最底部以上100像素时， 加载新内容*/
if
($(document).height() - $(
this
).scrollTop() - $(
this
).height()<100){
counter ++;
pageStart = counter * pageSize;
callback && callback(config, pageStart, pageSize);
}
});
/*第一次自动加载*/
callback && callback(config, pageStart, pageSize);
},
}
$.loadmore = loadmore;
})(window, window.jQuery || window.Zepto);
|
如何使用呢？很简单：
|
1
2
3
4
5
|
$.loadmore.get(getData, {
scroll:
true
,
//默认是false,是否支持滚动加载
size:7,
//默认是10
flag: 1,
//自定义参数，可选，示例里没有用到
});
|
第一个参数是回调函数，即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来：
|
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
|
function
getData(config, offset,size){
config.isAjax =
true
;
$.ajax({
type:
'GET'
,
url:
'json/blog.json'
,
dataType:
'json'
,
success:
function
(reponse){
config.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);
/*******************************************/
/*隐藏more*/
if
( (offset + size) >= sum){
$(
".js-load-more"
).hide();
config.isEnd =
true
;
/*停止滚动加载请求*/
//提示没有了
}
else
{
$(
".js-load-more"
).show();
}
},
error:
function
(xhr, type){
alert(
'Ajax error!'
);
}
});
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
扫一扫
1852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
