使用jquery.more.js来实现滚动加载数据
Posted Life Love Tech
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jquery.more.js来实现滚动加载数据相关的知识，希望对你有一定的参考价值。
<body> <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> <script src="jquery.min.js"></script> <script src="jquery.more.js"></script> <script> $(function() { $(‘#more‘).more({ ‘address‘: ‘data.php‘ }) }); </script> </body>
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);
接口返回的数据格式
[ { "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" } ]
ps：返回的数据key与class相对应
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来实现滚动加载数据的主要内容，如果未能解决你的问题，请参考以下文章