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>

　　

坐下备份方便后期分页直接使用

 

转载于:https://www.cnblogs.com/threemore/p/4332886.html