我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。
  滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现动态加载,其实就是一个典型的Ajax应用。本文将使用jQuery,结合PHP,mysql以及JSON,为您讲解如何应用滚屏加载技术到您的项目中去。当然,阅读本文的前提是您需要有jQuery和PHP相关基础。
  下面是代码展示:共有两段:


  indexController.class.php
  namespace Home\Controller;
  class IndexController extends CommonController {
  public function auto(){
  $Yan = M(‘Yan’);
  $data = $Yan->where(‘status=1’)->order(‘id desc’)->limit(10)->select();
  $this->assign(‘list', $data);
  $this->assign('title', 'PHP学习笔记’);
  $this->display(‘Index/auto’);
  }
  public function getauto(){
  $Yan = M(‘Yan’);
  $page = intval($_GET['page']);  //获取请求的页数
  $start = $page*10;
  $data = $Yan->where(‘status=1’)->field(‘content,time’)->order(‘id desc’)->limit($start,10)->select();
  echo json_encode($data);  //转换json数据输出
  }
  }


  index.html


  <div class=“moodlist”>
  <div class=“bloglist”>
  <volist name=“list” id=“vo”>
  <ul class=“arrow_box”>
  <div class=“sy”>
  <p> {$vo.content}</p>
  </div>
  <span class=“dateview”>{$vo.time|date=“Y-m-d”,###}</span>
  </ul>
  </volist>
  </div>
  <div id=“nodata”></div>
  </div>
  <script type=“text/javascript”>
  $(function(){
  var winH = $(window)。height(); //页面可视区域高度
  var i = 1; //设置当前页数
  $(window)。scroll(function () {
  var pageH = $(document.body)。height();
  var scrollT = $(window)。scrollTop(); //滚动条top
  var aa = (pageH-winH-scrollT)/winH;
  if(aa<0.02){
  $.getJSON(“/Index/getauto”,{page:i},function(json){
  if(json){
  var str = “”;
  $.each(json,function(index,array){
  var str = “<ul class=\”arrow_box\“><div class=\”sy\“><p>”+array['content']+“</p></div><span class=\”dateview\“>”+array['time']+“</span></ul>”;
  $(“.bloglist”)。append(str);
  });
  i++;
  }else{
  $(“#nodata”)。show()。html(“已经到底了…”);
  return false;
  }
  });
  }
  });
  });
  </script>