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

  

我们浏览有些网页的时候，当拉动浏览器的滚动条时到页底时，页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术，必应图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。

滚屏加载技术，就是使用Javascript监视滚动条的位置，每次当滚动条到达浏览器窗口底部时，触发一个Ajax请求后台PHP程序，返回相应的数据，并将返回的数据追加到页面底部，从而实现了动态加载，其实就是一个典型的Ajax应用。本文将使用jQuery，结合PHP，mysql以及JSON，为您讲解如何应用滚屏加载技术到您的项目中去。当然，阅读本文的前提是您需要有jQuery和PHP相关基础。

下面是代码展示：共有两段：

indexController.class.php

PHP

public function getauto(){
            $count = M($this->_table)->where($where)->count();
            $pagesize = floor(($count-8)/5);
            $page = intval($_GET['page']);  //获取请求的页数
            $start = $page*5+3;
            $Model = new Model() ;// 实例化一个model对象 没有对应任何数据表
            $data = $Model->query("select *,(ssa+ssb+ssc+ssd+sse+ssf+ssg+ssh+ssi+ssj) as num  from `shangfox_org` where org_statu = 2  order by num desc limit $start,5");
            //$data = M($this->_table)->where($where)->limit($limit)->select();
            foreach ($data as $key => $value) {
                if ($data[$key]['num'] >= 80) {
                    $data[$key]['star'] = '<img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" />';
                }elseif ($data[$key]['num'] >= 60 && $data[$key]['num'] < 80) {
                    $data[$key]['star'] =  '<img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" />';
                }elseif ($data[$key]['num'] >= 40 && $data[$key]['num'] < 60) {
                    $data[$key]['star'] =  '<img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" />';
                }elseif ($data[$key]['num'] >= 20 && $data[$key]['num'] < 40) {
                    $data[$key]['star'] = '<img src="/Public/Index/Images/xing.png" /><img src="/Public/Index/Images/xing.png" />';
                }elseif ($data[$key]['num'] >= 0 && $data[$key]['num'] < 20) {
                    $data[$key]['star'] =  '<img src="/Public/Index/Images/xing.png" />';
                }
                $data[$key]['orders'] = $key+$start+1;
                $data[$key]['pagesize'] = $pagesize;
                
            }
            
            echo json_encode($data);  //转换为json数据输出

         }

js

$(function() {
        var winH = $(window).height(); //页面可视区域高度
        var i = 1; //设置当前页数
        $(".dianji").click(function() {
                $.getJSON("/Org/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['org_name']+"</p></div><span class=\"dateview\">"+array['id']+"</span></ul>";
                                        var desc = array['org_desc'];
                                        var org_desc = desc;
                                        if (desc.length > 136) {
                                                var org_desc = (desc.substring(0, 136)) + "…";
                                        }
                                        var str = '<li><div class="num">' + array['orders'] + '</div><a class="img"href="/org/2.html"><img src="' + array['org_logo'] + '"></a><div class="m"><a class="t"href="/org/' + array['id'] + '.html"><b>' + array['org_name'] + '</b><em>' + array['star'] + '</em></a><span>机构综合评分：' + array['num'] + '</span><p>' + org_desc + '</p></div><div class="r"><div class="li"><span>注册资金：</span><div class="jindu"><em style="width:' + array['ssa'] + '0%"></em></div></div><div class="li"><span>理财产品：</span><div class="jindu"><em style="width:' + array['ssb'] + '%"></em></div></div><div class="li"><span>交易佣金：</span><div class="jindu"><em style="width:' + array['ssc'] + '0%"></em></div></div><div class="li"><span>特色服务：</span><div class="jindu"><em style="width:' + array['ssd'] + '0%"></em></div></div><div class="li"><span>资讯及时：</span><div class="jindu"><em style="width:' + array['sse'] + '0%"></em></div></div><div class="li"><span>客户服务：</span><div class="jindu"><em style="width:' + array['ssf'] + '0%"></em></div></div><div class="li"><span>开户渠道：</span><div class="jindu"><em style="width:' + array['ssg'] + '0%"></em></div></div><div class="li"><span>交易软件：</span><div class="jindu"><em style="width:' + array['ssh'] + '0%"></em></div></div><div class="li"><span>理财产品：</span><div class="jindu"><em style="width:' + array['ssi'] + '0%"></em></div></div><div class="li"><span>券商实力：</span><div class="jindu"><em style="width:' + array['ssj'] + '0%"></em></div></div></div></li>';
                                        $(".orglist").append(str);

                                        var page = array['pagesize'] + 1;
                                        if (page === i) {
                                                $(".dianji").text("数据加载完成！");
                                        }

                                });

                                i++;

                        } else {
                                $(".dianji").text("数据加载完成！");
                                return false;
                        }

                });
        })

});

namespace Home\Controller;

02	class IndexController extends CommonController {

03	public function auto(){

04	$Yan = M('Yan');

05	$data = $Yan->where('status=1')->order('id desc')->limit(10)->select();

06	$this->assign('list', $data);

07	$this->assign('title', 'PHP学习笔记');

08	$this->display('Index/auto');

09

10

}

11

12	public function getauto(){

13	$Yan = M('Yan');

14	$page = intval($_GET['page']);  //获取请求的页数

15	$start = $page*10;

16	$data = $Yan->where('status=1')->field('content,time')->order('id desc')->limit($start,10)->select();

17	echo json_encode($data);  //转换为json数据输出

18

19

}

20

21

}

index.html

<div class="moodlist">

02	<div class="bloglist">

03	<volist name="list" id="vo">

04	<ul class="arrow_box">

05	<div class="sy">

06	<p> {$vo.content}</p>

07

</div>

08	<span class="dateview">{$vo.time|date="Y-m-d",###}</span>

09

</ul>

10

</volist>

11

</div>

12	<div id="nodata"></div>

13

</div>

14

15	<script type="text/javascript">

16	$(function(){

17	var winH = $(window).height(); //页面可视区域高度

18	var i = 1; //设置当前页数

19	$(window).scroll(function () {

20	var pageH = $(document.body).height();

21	var scrollT = $(window).scrollTop(); //滚动条top

22	var aa = (pageH-winH-scrollT)/winH;

23	if(aa<0.02){

24	$.getJSON("/Index/getauto",{page:i},function(json){

25

if(json){

26	var str = "";

27	$.each(json,function(index,array){

28	var str = "<ul class=\"arrow_box\"><div class=\"sy\"><p>"+array['content']+"</p></div><spanclass=\"dateview\">"+array['time']+"</span></ul>";

29	$(".bloglist").append(str);

30

});

31

i++;

32

}else{

33	$("#nodata").show().html("已经到底了。。。");

34	return false;

35

}

36

});

37

}

38

});

39

});

40

</script>