Ajax 滚动下拉通用分页代码
我将请求的功能封装起来了 放在一个公用的js文件下面
然后使用juicer.js 来做js的模版 这样后期如果可以在任何的地方使用这个ajax的加载分页了
ajaxPage.js文件代码 option是配置一些公用的传入值
var page_module = { options : { pagesize : 10, get_content_callback : false, base_url : '/community/', uid : 0, aid :0, //活动id status :0, }, init : function(options){ this.options = $.extend(this.options, options); }, //获取内容列表信息 get_content_list : function(page){ $.ajax({ url : this.options.base_url, dataType : 'JSON', beforeSend: function(XMLHttpRequest){ $(".more").show().html('<span><img src="/static/community/images/loading.png" class="loading_img" />加载中...</span>'); }, data:{page:page, pagesize:this.options.pagesize, uid:this.options.uid,dateline:this.options.dateline,ajax:1,aid:this.options.aid}, success:function(data){ if(data && page_module.options.get_content_callback){ page_module.options.get_content_callback(data); } } }); } };
附上juicer.js的文件下载地址 方便后期下载 http://juicer.name/docs/docs_zh_cn.html
在使用ajax分页的页面 代码展示 只列出来了js部分代码 list.html
<div class="circle_base"> <ul id="contentlist"> {if $shopList} {loop $shopList $key $value} <li> <div class="main"> <a href="javascript:;" class="arrow"><i></i></a> <dl> <dt><img src="{$value['avatar']}" width="50px" height="50px"></dt> <dd> <h3>{$value['shopName']}</h3> <p>促销券:{$value['cpname']}</p> </dd> </dl> </div> <ul class="explain" rel="0"> <li> <span>说明:</span> <div>{$value['cpdesc']}</div> </li> <li> <span>数量:</span> <div>{$value['max']}</div> </li> <li> <span>适用门店:</span> <div>{$value['shopListName']}</div> </li> <li> <span>截至日期:</span> <div>{$value['etime']}</div> </li> </ul> </li> {/loop} {else} <li class="no_pc">暂时还没有商家参与</li> {/if} </ul> <div class="more" style="display:none"> <a href="javascript:;">没有更多了</a> </div> </div> <script src="/static/community/js/ajaxPage.js"></script> <script src="/static/community/js/juicer.js"></script> <script id="tpl" type="text/template"> {@each dataAjax as it, k} <li> <div class="main"> <a href="javascript:;" class="arrow"><i></i></a> <dl> <dt><img src="{$value['avatar']}" width="50px" height="50px"></dt> <dd> <h3>${it.shopName}</h3> <p>促销券:${it.cpname}</p> </dd> </dl> </div> <ul class="explain" rel="0"> <li> <span>说明:</span> <div>${it.cpdesc}</div> </li> <li> <span>数量:</span> <div>${it.max}</div> </li> <li> <span>适用门店:</span> <div>${it.shopListName}</div> </li> <li> <span>截至日期:</span> <div>${it.etime}</div> </li> </ul> </li> {@/each} </script> <script> $(".circle_base li .main").live("click",function(){ $(this).toggleClass("arrow_90"); $(this).siblings(".explain,.share_list").slideToggle(); }); //初始化分页数据 var options = { pagesize : 10, base_url : '/community/active/shopList', aid : {$aid}, get_content_callback : function(result){ if(result && result.dataAjax ){ var tpl = document.getElementById('tpl').innerHTML; var html = juicer(tpl, result); $("#contentlist").append(juicer(tpl,result)); }else{ $(".more").show().html('<a href="javascript:;" title="没有更多了">没有更多了</a>'); } } }; $(document).ready(function(){ page_module.init(options); var range = 50; //距下边界长度/单位px var num = 2; var totalheight = 0; $(window).scroll(function(){ var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度) totalheight = parseFloat($(window).height()) + parseFloat(srollPos); if(($(document).height()-range) <= totalheight) { page_module.get_content_list(num); num++; } }); }); </script>
坐下备份方便后期分页直接使用