我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、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数据输出
$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数据输出
}
$(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;
}
});
})
});
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 >< span class=\"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 > |