使用jquery.more.js上滑加载更多

Posted 2020-10-16 Champion-水龙果

html:

　　<div id="more">
        <div class="single_item">
            <div class="date"></div>
            <div class="author"></div>
            <div class="title"></div>
        </div>
        <a href="javascript:;" class="get_more"></a>
    </div>

<div id="nomore" style="text-align:center;color:gray"></div>

$(document).ready(function() {
     
     var totalPage = {$totalPage};//总页数
     var page = {$page}; //起始页
     var pageSize = {$pageSize} //每页显示个数
    $(window).scroll(function() {
         if(totalPage-page>0){ 
            //滚动条到达底部加载  
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            
                setTimeout(function() {
                           $.ajax({  
                                type: ‘GET‘,  
                                url: ‘?m=wap&c=vedio&a=art_more&typeid=93&yp=128&pageNum=‘+(page+1),  
                                success:function(data){  
                                    var msg=eval(data);
                                         $.each(msg, function (i, item) { 
                                             $(‘.art-list‘).append("<li><a href="+item.art_link+">"+item.title+"</a></li>");
                                        });  
                                    page=page+1;
                                },  
                                error:function(data){ 
                                     $("#nomore").html("加载失败...");  
                                     setTimeout(function() {   
                                            $("#nomore").html();  
                                        }, 3000);     
                                },
                               
                               
                            });  
                    
                }, 200);
            }
        }else{  
                  $("#nomore").html("我是有底线的...");  
                    setTimeout(function() {   
                         $("#nomore").empty();
                    }, 3000); 
        }  
    });  
});  

php:

// 连接数据库
require_once(‘connect.php‘);

$last = $_POST[‘last‘];
$amount = $_POST[‘amount‘];

$query = mysql_query("select * from article order by id desc limit $last,$amount");
while ($row = mysql_fetch_array($query)) {
    $sayList[] = array(
        ‘title‘ => $row[‘title‘],
        ‘author‘ => $row[‘id‘],
        ‘date‘ => date(‘m-d H:i‘, $row[‘addtime‘])
    );
}
echo json_encode($sayList);

返回json数据

[
  {
    "title": "xxx",
    "author": "1",
    "date": "04-04 10:34"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-04 09:52"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-04 09:18"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-03 23:44"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-03 23:09"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-03 22:33"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-03 20:25"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-03 08:26"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-02 21:56"
  },
  {
    "title": "xxx",
    "author": "1",
    "date": "04-02 08:52"
  }
]

jquery.more.js

/**
 * 调用方法： $(‘#more‘).more({‘url‘:‘data.php‘});
 * amount   每次显示记录数
 * address  请求的地址
 * format   接受数据的格式
 * template html记录DIV的class属性
 * trigger  触发加载更多记录的class属性
 * scroll   是否支持滚动触发加载
 * offset   滚动触发加载时的偏移量
 * data     自定义参数
 * loading  加载时显示
 */
(function($) {
    var target = null;
    var template = null;
    var lock = false;
    var cur_last = 0;
    var variables = {
        ‘last‘ : 0
    }
    var settings = {
        ‘amount‘   : ‘10‘,
        ‘address‘  : ‘comments.php‘,
        ‘format‘   : ‘json‘,
        ‘template‘ : ‘.single_item‘,
        ‘trigger‘  : ‘.get_more‘,
        ‘scroll‘   : ‘false‘,
        ‘offset‘   : ‘100‘,
        ‘data‘     : {},
        ‘loading‘  : ‘加载中...‘
    }
    var methods = {
        init: function(options) {
            return this.each(function() {
                if (options) {
                    $.extend(settings, options);
                }
                template = $(this).children(settings.template).wrap(‘<div/>‘).parent();
                template.css(‘display‘, ‘none‘);
                $(this).append(‘<div class="loading">‘ + settings.loading + ‘</div>‘);
                template.remove();
                target = $(this);
                if (settings.scroll == ‘false‘) {
                    $(this).find(settings.trigger).bind(‘click.more‘, methods.get_data);
                    $(this).more(‘get_data‘);
                } else {
                    if ($(this).height() <= $(this).attr(‘scrollHeight‘)) {
                        target.more(‘get_data‘, settings.amount * 2);
                    }
                    $(this).bind(‘scroll.more‘, methods.check_scroll);
                }
            })
        },
        check_scroll: function() {
            if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr(‘scrollHeight‘) && lock == false) {
                target.more(‘get_data‘);
            }
        },
        debug: function() {
            var debug_string = ‘‘;
            $.each(variables, function(k, v) {
                debug_string += k + ‘ : ‘ + v + ‘\n‘;
            })
            alert(debug_string);
        },
        remove: function() {
            target.children(settings.trigger).unbind(‘.more‘);
            target.unbind(‘.more‘)
            target.children(settings.trigger).remove();

        },
        add_elements: function(data) {
            var root = target
            var counter = 0;
            if (data) {
                $(data).each(function() {
                    counter++
                    var t = template
                    $.each(this, function(key, value) {
                        if (t.find(‘.‘ + key)) t.find(‘.‘ + key).html(value);
                    })
                    if (settings.scroll == ‘true‘) {
                        root.children(‘.loading‘).before(t.html())
                    } else {
                        root.children(settings.trigger).before(t.html())
                    }
                    root.children(settings.template + ‘:last‘).attr(‘id‘, ‘more_element_‘ + ((variables.last++) + 1));
                })

            } else methods.remove()
            // target.children(‘.loading‘).css(‘display‘, ‘none‘);
            if (counter < settings.amount){
                methods.remove();
                target.children(‘.loading‘).html("已经到底了");
            }
        },
        get_data: function() {
            var ile;
            lock = true;
            target.children(".loading").css(‘display‘, ‘block‘);
            $(settings.trigger).css(‘display‘, ‘none‘);
            if (typeof(arguments[0]) == ‘number‘) {
                ile = arguments[0];
            } else {
                ile = settings.amount;
            }
            if(variables.last >= cur_last) {
                var postdata = settings.data;
                postdata[‘last‘] = variables.last;
                postdata[‘amount‘] = ile;
                $.post(settings.address, postdata, function(data){
                    $(settings.trigger).css(‘display‘, ‘block‘)
                    methods.add_elements(data)
                    lock = false;
                }, settings.format);
                cur_last = cur_last + 10;
            }
        }
    };
    $.fn.more = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method == ‘object‘ || !method) {
            return methods.init.apply(this, arguments);
        } else $.error(‘Method ‘ + method + ‘ does not exist!‘);
    }
    $(document).ready(function() {
        $(window).on(‘scroll‘, function() {
            if ($(document).scrollTop() + $(window).height() > $(document).height() - 10) {
                $(‘.get_more‘).click();
            }
        });
    });
})(jQuery)