AJAX 下拉无刷新分页加载

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333723

 背景：

最近在手机端开发功能显示列表数据时发现，如果数据过多，造成图片加载延迟，不适合即时的效果呈现，既影响用户体验，又显得没有技术含量，毕竟最后的说辞都怪在了倒霉程序猿的头上。通过度娘的帮助和自己的测试，可以提供下面的一种方式，个人使用的是PHP开发，代码都是相通的，都可以借鉴优化。

实现步骤：

1.构造Controller控制器 代码做了简化，废话不多说，直接上代码，其中loading()为对应的界面显示方法，loadpage() 方法为ajax请求的数据获取地址；searchInfo() 为自定义数据库信息获取的函数。 ​

2.前端页面设计

毕竟代码框架是 ThinkPHP ，可能会对自己的理解有出入，不过大同小异，参考代码如下： ​

3.js代码实现 重要的就是js代码的实现，绑定下拉事件的触发 ​

4.实现效果截图 ​

补充： 1.css代码就不上传了，其中提示框的效果是引用layer.js框架而实现的，建议可以百度学习一下，挺简单实用的 2.后台代码中，使用了一个函数 showMsg(), 是自己构造的一个公共函数，可以参考使用，方便代码的 json数据获取和程序终止实现

function showMsg($status,$message,$data=array()){
    $result = array(
        'status' => $status,
        'message' =>$message,
        'data' =>$data
    );
    exit(json_encode($result));
}

源代码下载 >>>