首页 > 未分类 > thinkphp滚屏加载--无刷新动态加载数据技术的应用
2014
07-22

thinkphp滚屏加载--无刷新动态加载数据技术的应用

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、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>
来源:smsyun

友荐云推荐