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

Posted Champion-水龙果

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用jquery.more.js上滑加载更多相关的知识,希望对你有一定的参考价值。

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)

 

以上是关于使用jquery.more.js上滑加载更多的主要内容,如果未能解决你的问题,请参考以下文章

使用jquery.more.js来实现滚动加载数据

vue 上滑加载更多

jquery 上滑加载更多

微信小程序 scroll-view 上滑没有加载更多问题

react + antd-mobile 的listview 在h5移动网页端的下拉刷新和上滑加载的实现

解决上滑过程中数据重复的问题