ajax+thinkphp5实现上拉刷新，下拉加载下一页

第一步，布局

<div class="shuaxin">你在下拉刷新</div>
<div class="wrapper">
	<div class="conpon-div">
	    这里是优惠券列表
	</div>
</div>
<div class="jiazai">你是在上拉加载</div>

布局很简单，css根据自己的UI调。

第二步，js部分

引入iscroll.js文件

var myscroll = new IScroll('.wrapper');
$(document).on("touchend",function(){
    if(myscroll.y==0)
    {
       $(".shuaxin").hide();
    }
    if(myscroll.y==myscroll.maxScrollY)
    {
       $(".jiazai").hide();
    }
    myscroll.refresh();
});
$(document).on("touchmove",function(){
    if(myscroll.y>20)
    {
       //上拉刷新
              
    }
    if(myscroll.y<myscroll.maxScrollY-20)
    {
        //获取下一页数据
        getData();
    }
})
var page = 1;
var num = 5;
var is_end = 0;//是否是最后一页，如果是，车上拉不在加1表示已经是最后一页
function getData(){
   	if(is_end == 0){
   		page += 1;
   		ajax_get_conpon_list(relocations,page);
   	}else{
   		//表示已经是最后一页，等下在处理这里
   		return false;
   	}
}

function ajax_get_conpon_list(locations,tmp_page){
   $.ajax({
    	url:"你的获取数据的接口地址",
    	type:"post",
    	dataType:"json",
    	data:{
    	    你获取数据的参数
    	},
    	async:false,
    	success:function(res){
    		if(res.code == 1){
    				var html = "";
    				$.each(res.data,function(index,value){
    					html += ‘拼接你的列表的html’;
    				});
    				if(num > res.data_count){
    					//已经是最后一页
    					is_end = 1;
    				}
    				if(page == 0||page==1){
    					$('.conpon-div').empty().append(html);
    				}else{
    					$('.conpon-div').append(html);
    				}
    				
    			}
    		},
    		error:function(){
    			alert('error');
    		}
    	});
    }

第三步，获取数据的接口

接口代码就自己根据业务写了！！