AJAX 下拉无刷新分页加载

    背景:

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


源代码下载 >>>





你可能感兴趣的:(AJAX 下拉无刷新分页加载)