【加载更多】插件

发表于 分类于 阅读次数：

关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。

但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。

h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。

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
/*
 * loadmore.js
 * 加载更多
 *
 * @time 2017-7-08 15:40:25
 * @author munachar
 * 可以传的参数默认有：size,scroll 可以自定义
 * */

;(function(w,$){

     var loadmore = {
         /*单页加载更多 通用方法
          *
          * @param callback 回调方法
          * @param config 自定义参数
          * */
         get : function(callback, config){
             var config = config ? config : {}; /*防止未传参数报错*/
             var counter = 1; /*计数器*/
             var pageStart = config.size ? config.size : 10;
             var pageSize = config.size ? config.size : 10;

             /*通过自动监听滚动事件加载更多,可选支持*/
             config.isEnd = false; /*结束标志*/
             config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/
             $(config.ele).scroll(function(){
                 /*是否开启滚动加载*/
                 if(!config.scroll){
                     return;
                 }
                 /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/
                 if(config.isEnd == true || config.isAjax == true){
                     return;
                 }
                 /*当滚动到最底部以上100像素时， 加载新内容*/
                 if ($(this).find("ul").height() - $(this).scrollTop() - $(this).height()<100){
                     counter ++;
                     pageStart = counter * pageSize;
                     callback && callback.call( $(config.ele),config, pageStart, pageSize);
                 }
             });
             /*第一次自动加载*/
             callback && callback.call( $(config.ele),config, pageStart, pageSize);
         },
     }
     $.loadmore = loadmore;
 })(window, window.jQuery || window.Zepto);

如何调用：

1
2
3
4
5
6
$.loadmore.get(getData, {
                ele:window,  // 绑定滚动监听元素 默认是window
                scroll: true,  //默认是false,是否支持滚动加载
                size:10,  //默认是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!');
        }
    });
}

以上仅贴出核心代码，详细案列：@Munachar