ajax实现无限滚动加载

版权声明：本文为博主原创文章，未经博主允许不得转载。

 

控制器代码：

 

[html] view plain copy
 
  1.  public function index(){  
  2.             $news = M('System_voice');  
  3.             $news2=M('System_voice')->where(array('status'=> 1))->select();  
  4.             $category = D('System_voice_category')->where(array('status'=> 1))->order('sort DESC')->select();  
  5.             $condition_news['category_id'] = $category[0]['id'];  
  6.             $condition_news['status'] = 1;  
  7.   
  8.             //$page = $_GET['page'] ? intval($_GET['page']) : 1;  
  9.             $news = M('System_voice');  
  10.             $return['count'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->count();  
  11.             if($return['count'] > ($page-1)*20){  
  12.                 //$return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*5).',5')->select();  
  13.                 $return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit(5)->select();  
  14.             }else{  
  15.                 $return['news_list'] = array();  
  16.             }  
  17.             $return['totalPage'] = ceil($return['count']/5);  
  18.             $key = array_search($condition_news['category_id'],$category);  
  19.             $this->assign('news2',$news2);  
  20.             $this->assign('now_cat',$category[$key]['name']);  
  21.             $this->assign("category",$category);  
  22.             $this->assign("now_cat_id",$category[0]['id']);  
  23.             $this->assign("count",$return['count']);  
  24.             $this->assign("news_list",$return['news_list']);  
  25.             $this->assign("news_list_size",sizeof($return['news_list']));  
  26.             $this->display();  
  27.         }  
  28. public function ajax_index(){  
  29.             $news = M('System_voice');  
  30.             $news2=M('System_voice')->where(array('status'=> 1))->select();  
  31.             $category = D('System_voice_category')->where(array('status'=> 1))->order('sort DESC')->select();  
  32.             $condition_news['category_id'] = $category[0]['id'];  
  33.             $condition_news['status'] = 1;  
  34.             $page = $_REQUEST['page'] ? intval($_REQUEST['page']) : 1;  
  35.             //var_dump($page);  
  36.             $news = M('System_voice');  
  37.             $return['count'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->count();  
  38.             if($return['count'] > ($page-1)*5){  
  39.                 //$return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*5).',5')->select();  
  40.                 $return['news_list'] = $news->where(array('category_id'=> $category[0]['id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*5).',5')->select();  
  41.             }else{  
  42.                 $return['news_list'] = array();  
  43.             }  
  44.             $ocount=$return['count']%5;  
  45.             $return['totalPage'] = ceil($return['count']/5);  
  46.             $key = array_search($condition_news['category_id'],$category);  
  47.             //exit(json_encode(array('error_code'=>0,'error_reason'=>'获取成功','result'=>$return['news_list'])));  
  48.             $this->assign("news_list",$return['news_list']);  
  49.             $this->assign("ocount",$ocount);  
  50.             //$this->assign("totalPage",$return['totalPage']);  
  51.             $this->display();  
  52.         }  
  53. public function ajaxList(){  
  54.             $this->header_json();  
  55.             $totalRows=15;  
  56.             $page = $_GET['page'] ? intval($_GET['page']) : 1;  
  57.             $news = M('System_voice');  
  58.             $return['count'] = $news->where(array('category_id'=>$_GET['cat_id'],'status'=>'1'))->count();  
  59.             if($return['count'] > ($page-1)*$totalRows){  
  60.                 $return['news_list'] = $news->where(array('category_id'=>$_GET['cat_id'],'status'=>'1'))->order('sort DESC,id DESC')->limit((($page-1)*$totalRows),$totalRows)->select();  
  61.             }else{  
  62.                 $return['news_list'] = array();  
  63.             }  
  64.             $return['totalPage'] = ceil($return['count']/10);  
  65.             echo json_encode($return);  
  66.         }  

视图代码：index.php

 

 

[html] view plain copy
 
  1. <?php if(!defined('PigCms_VERSION')){ exit('deny access!');} ?>  
  2. <!DOCTYPE html>  
  3. <html lang="zh-CN">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />  
  7.         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"/>  
  8.         <meta name="apple-mobile-web-app-capable" content="yes"/>  
  9.         <meta name='apple-touch-fullscreen' content='yes'/>  
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black"/>  
  11.         <meta name="format-detection" content="telephone=no"/>  
  12.         <meta name="format-detection" content="address=no"/>  
  13.         <link rel="stylesheet" type="text/css" href="{pigcms{$static_path}css/common.css?210"/>  
  14.         <link rel="stylesheet" type="text/css" href="{pigcms{$static_path}css/village.css?213"/>  
  15.         <script type="text/javascript" src="{pigcms{:C('JQUERY_FILE_190')}" charset="utf-8"></script>  
  16.           
  17.         <script type="text/javascript" src="{pigcms{$static_path}js/idangerous.swiper.min.js" charset="utf-8"></script>  
  18.         <script type="text/javascript" src="{pigcms{$static_path}js/fastclick.js" charset="utf-8"></script>  
  19.         <script type="text/javascript" src="{pigcms{$static_path}/layer/layer.m.js" charset="utf-8"></script>  
  20.         <script type="text/javascript" src="{pigcms{$static_path}js/common.js?210" charset="utf-8"></script>  
  21.         <link rel="stylesheet" type="text/css" href="http://localhost/tpl/Wap/pure/static/raty/jquery.raty.css"/>  
  22.         <script type="text/javascript" src="http://localhost/tpl/Wap/pure/static/raty/jquery.raty.js" charset="utf-8"></script>  
  23.         <script type="text/javascript">  
  24.             var location_url = "{pigcms{:U('Systemvoice/ajaxList')}";  
  25.             var backUrl = "{pigcms{:C('config.site_url')}/wap.php";  
  26.             var now_cat_id = "{pigcms{$now_cat_id}";  
  27.             var count = "{pigcms{$count}";  
  28.         </script>  
  29.         <script type="text/javascript" src="{pigcms{$static_path}js/newslist.js?215" charset="utf-8"></script>  
  30.         <style>  
  31.             .title1{  
  32.                 font-family:"Microsoft Yahei";  
  33.                 letter-spacing:0.5px;  
  34.                 color:#999;  
  35.                 height:40px;  
  36.                 overflow:hidden;  
  37.                 display: -webkit-box;  
  38.                 -webkit-line-clamp: 2;  
  39.                 -webkit-box-orient: vertical;  
  40.                 word-break: break-all;  
  41.                 padding-left:10px;  
  42.                 padding-right:10px;  
  43.                 padding-top:5px;  
  44.                 padding-bottom:5px;  
  45.             }  
  46.              .title2{  
  47.                 font-family:"Microsoft Yahei";  
  48.                 letter-spacing:0.5px;  
  49.                 color:black;  
  50.                 white-space: nowrap;   
  51.                 overflow: hidden;   
  52.                 text-overflow: ellipsis;  
  53.                 padding-right:30px;  
  54.                 padding-top:10px;  
  55.                 padding-bottom:10px;  
  56.             }  
  57.             .title3{  
  58.                 font-family:"Microsoft Yahei";  
  59.                 letter-spacing:0.5px;  
  60.                 color:#999;  
  61.                 padding-left:10px;  
  62.                 padding-right:10px;  
  63.                 padding-top:10px;  
  64.                 padding-bottom:15px;  
  65.             }  
  66.             #container{  
  67.                 background-color:230, 229, 235;  
  68.             }  
  69.             .newsListBox dd div{  
  70.                 padding-left:12px;  
  71.                 padding-right:20px;  
  72.                 margin-right:30px;  
  73.                 overflow:hidden;  
  74.                 word-break:keep-all;  
  75.                 white-space:nowrap;  
  76.                 text-overflow:ellipsis;  
  77.                 font-size:12px;  
  78.                 margin-bottom: 0px;  
  79.                 margin-top: 0px;  
  80.                 padding-top: 10px;  
  81.                 padding-bottom: 0px;  
  82.             }  
  83.             #co{  
  84.                 color:#999;  
  85.             }  
  86.             .conhr{  
  87.                 border-radius: 15px;  
  88.                 background-color:#F7F7F7;  
  89.                 border-bottom: 1px solid #f1f1f1;  
  90.                 margin-right:10px;  
  91.                 margin-left:10px;  
  92.                 margin-bottom: 10px;  
  93.                 margin-top: 0px;  
  94.             }  
  95.             .conhr dd{  
  96.                 margin-top:12px;  
  97.                 border-radius: 15px;  
  98.                 background-color:#F7F7F7;  
  99.                 font-family:"Microsoft Yahei";  
  100.                 letter-spacing:1px;  
  101.                 margin-bottom: 0px;  
  102.                 margin-top: 0px;  
  103.                 padding-top: 0px;  
  104.                 padding-bottom: 0px;  
  105.             }  
  106.             body{  
  107.                 margin:0 auto;  
  108.                 padding:0 auto;  
  109.             }   
  110.             #co2{  
  111.                 color:#999;  
  112.                 height:40px;  
  113.                 overflow:hidden;  
  114.                 display: -webkit-box;  
  115.                 -webkit-line-clamp: 2;  
  116.                 -webkit-box-orient: vertical;  
  117.                 word-break: break-all;  
  118.                 font-family:"Microsoft Yahei";  
  119.                 letter-spacing:1px;  
  120.             }  
  121.             #ljdiv{  
  122.                 margin:0;  
  123.                 padding:0;  
  124.             }  
  125.             #coo{  
  126.                 padding: 10px 6px;  
  127.             }  
  128.         </style>  
  129.     </head>  
  130.     <body>  
  131.     <if condition="!$is_app_browser">  
  132.         <header style="display:none"><div id="backBtn"></div>语音导游</header>  
  133.     </if>  
  134.         <div id="container">  
  135.               
  136.                 <div id="pullDown">  
  137.                     <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新页面</span>  
  138.                 </div>  
  139.                 <section class="villageBox newsBox newsListBox">  
  140.                     <div class="headBox newsheader" style="width:0px; height:0px;">  
  141.                         <div class="swiper-container swiper-container1">  
  142.                             <ul class="swiper-wrapper">  
  143.                                 <volist name="category" id="vo">  
  144.                                     <li hidden class="swiper-slide <if condition="$i eq 1">on</if>" data-cat_id="{pigcms{$vo.id}"></li>  
  145.                                 </volist>  
  146.                             </ul>  
  147.                         </div>  
  148.                     </div>  
  149.                     <!--<dl id="dl2">  
  150.                         <volist name="news_list" id="vo">  
  151.                             <dd data-url="{pigcms{:U('Systemvoice/news',array('id'=>$vo['id']))}">  
  152.                                 <div>{pigcms{$vo.title}</div>  
  153.                             </dd>  
  154.                         </volist>  
  155.                     </dl>-->  
  156.                   
  157.                 </section>  
  158.                 <input type="hidden" value="{pigcms{$news_list_size}" id="count1">  
  159.                 <input type="hidden" value="{pigcms{$count}" id="count">  
  160.                 <volist name="news_list" id="vo">  
  161.                 <div style="background-color:white;width:96%;margin:0px auto;margin-top:5px;border-radius:5px;">  
  162.                     <a href="{pigcms{$vo['lianjie']}"><div class="title2" style="padding-left:10px;"><img style="width:10px;height:15px;padding-right:12px;" src="./tpl/Wap/static/images/new_my/title_left.png"/><font style="font-size:17px">{pigcms{$vo['title']}</font><br /></div></a>  
  163.                     <a href="{pigcms{$vo['lianjie']}"><div><img style="width:100%;" src="{pigcms{$vo['img4']}" /></div></a>  
  164.                     <div class="title1">{pigcms{$vo['introduction']}</div>   
  165.                     <div class="title3">  
  166.                         <div style="float:left;"><img class="sc" id="{pigcms{$vo['id']}" onClick="sc(this)" style="width:15px;height:15px;padding-left:0px;margin-left:0px;" src="./tpl/Wap/static/images/new_my/like.png"/>  <font id="fav{pigcms{$vo.id}" color="#CCCCCC">{pigcms{$vo['fav']}</font>  </div>  
  167.                         <div style="float:left; margin-left:40px;"> <div class="score" name="{pigcms{$vo['id']}" id="{pigcms{$vo['score']}"></div></div>   
  168.                         <div style="float:right;margin-right:20px"><a href="{pigcms{:U('Systemvoice/map2',array('id'=>$vo['id']))}"><img style="width:13px;height:13px" src="./tpl/Wap/static/images/new_my/ditudaohahng.png"/></a></div>  
  169.                         <div style="clear:both;"></div>  
  170.                     </div>  
  171.                 </div>  
  172.                 </volist>  
  173.                 <input type="hidden" name="score" id="sc" value="5"/>  
  174.   
  175.         </div>  
  176.         <script type="text/javascript">  
  177.           
  178.             function sc(obj){  
  179.                 var id = $(obj).attr("id");  
  180.                 var fav = '#fav'+id;  
  181.                 var num = parseInt($(fav).text())+1;  
  182.                 $.ajax({     
  183.                     type:"POST",     
  184.                     url:"{pigcms{:U('Systemvoice/scajax')}",    
  185.                     data:"id="+id,    
  186.                     cache:false, //不缓存此页面     
  187.                     success:function(data){      
  188.                         $(fav).text(num);  
  189.                     }    
  190.                 });  
  191.             }     
  192.             $(document).ready(function(){  
  193.                 $("#container").css('top','0px');  
  194.                 var count = $("#count").val();  
  195.                 var count2 = $("#count1").val();  
  196.                 var count3 = count2 * 290+"px";  
  197.                 $("#container").css('height',count3);  
  198.                 var page = 2;  
  199.                 $(window).scroll(function () {  
  200.                     if ($(document).scrollTop() + $(window).height() >= $(document).height()) {  
  201.                         $.ajax({     
  202.                             type:"POST",     
  203.                             url:"{pigcms{:U('Systemvoice/ajax_index')}",    
  204.                             data: {page:page},  
  205.                             dataType:'html',   
  206.                             cache:false, //不缓存此页面     
  207.                             success:function(msg){  
  208.                                 var ocount = $(msg).find("#ocount").val();  
  209.                                 var totalPage = $(msg).find("#totalPage").val();  
  210.                                 $("#container").append(msg);  
  211.                                 //var count4 = count2 * 290 * page+"px";  
  212.                                 var count5 = count * 290 +"px";  
  213.                                 $("#container").css('height',count5);  
  214.                                 page++;  
  215.                             }   
  216.                         });  
  217.                     }  
  218.                 });  
  219.             })  
  220.               
  221.             $("body").unbind("click");  
  222.             $("a").click(function(){  
  223.                 var href = $(this).attr("href");  
  224.                 window.location.href= href;  
  225.             });  
  226.               
  227.   
  228.             window.shareData = {    
  229.                 "moduleName":"Systemnews",  
  230.                 "moduleID":"0",  
  231.                 "imgUrl": "<if condition="$config['wechat_share_img']">{pigcms{$config.wechat_share_img}<else/>{pigcms{$config.site_logo}</if>",   
  232.                 "sendFriendLink": "{pigcms{$config.site_url}{pigcms{:U('Systemnews/index')}",  
  233.                 "tTitle": "平台快报 - {pigcms{$config.site_name}",  
  234.                 "tContent": "点击查看快报详细内容"  
  235.             };  
  236.             $.fn.raty.defaults.path = 'http://www.97farm.com/tpl/Wap/bluesky/static/raty/images';  
  237.             //$('.score').raty({readOnly: true,score:2.5});  
  238.             $('.score').each(function(i,e){  
  239.                 var v = $(this).attr("id");  
  240.                 $(this).raty({score:v,  
  241.                     click: function(score, evt) {  
  242.                         var id = $(this).attr("name");  
  243.                         $.ajax({     
  244.                             type:"POST",     
  245.                             url:"{pigcms{:U('Systemvoice/pfajax')}",    
  246.                             data: {id:id,score:score},  
  247.                             cache:false, //不缓存此页面     
  248.                             success:function(data){      
  249.                                 //$("#sc").val(score);  
  250.                             }   
  251.                         });  
  252.                         //alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);  
  253.                         $("#sc").val(score);  
  254.                     }  
  255.                 });  
  256.             });  
  257.         </script>  
  258.         {pigcms{$shareScript}  
  259.     </body>  
  260. </html>  
 

ajax_index.php页面

 

 

[html] view plain copy
 
  1. <html>  
  2.     <head>  
  3.         <title>测试1</title>  
  4.     </head>  
  5.     <body>  
  6.         <volist name="news_list" id="vo">  
  7.                 <div style="background-color:white;width:96%;margin:0px auto;margin-top:5px;border-radius:5px;">  
  8.                     <a href="{pigcms{$vo['lianjie']}"><div class="title2" style="padding-left:10px;"><img style="width:10px;height:15px;padding-right:12px;" src="./tpl/Wap/static/images/new_my/title_left.png"/><font style="font-size:17px">{pigcms{$vo['title']}</font><br /></div></a>  
  9.                     <a href="{pigcms{$vo['lianjie']}"><div><img style="width:100%;" src="{pigcms{$vo['img4']}" /></div></a>  
  10.                     <div class="title1">{pigcms{$vo['introduction']}</div>   
  11.                     <div class="title3">  
  12.                         <div style="float:left;"><img class="sc" id="{pigcms{$vo['id']}" onClick="sc(this)" style="width:15px;height:15px;padding-left:0px;margin-left:0px;" src="./tpl/Wap/static/images/new_my/like.png"/>  <font id="fav{pigcms{$vo.id}" color="#CCCCCC">{pigcms{$vo['fav']}</font>  </div>  
  13.                         <div style="float:left; margin-left:40px;"> <div class="score" name="{pigcms{$vo['id']}" id="{pigcms{$vo['score']}"></div></div>   
  14.                         <div style="float:right;margin-right:20px"><a href="{pigcms{:U('Systemvoice/map2',array('id'=>$vo['id']))}"><img style="width:13px;height:13px" src="./tpl/Wap/static/images/new_my/ditudaohahng.png"/></a></div>  
  15.                         <div style="clear:both;"></div>  
  16.                     </div>  
  17.                 </div>  
  18.                 </volist>  
  19.         <span>  
  20.             <input type="hidden" id="ocount" value="{pigcms{$ocount}"/>  
  21.             <input type="hidden" id="totalPage" value="{pigcms{$totalPage}"/>  
  22.         </span>  
  23.         <script>  
  24.             $.fn.raty.defaults.path = 'http://www.97farm.com/tpl/Wap/bluesky/static/raty/images';  
  25.                 //$('.score').raty({readOnly: true,score:2.5});  
  26.                 $('.score').each(function(i,e){  
  27.                     var v = $(this).attr("id");  
  28.                     $(this).raty({score:v,  
  29.                         click: function(score, evt) {  
  30.                             var id = $(this).attr("name");  
  31.                             $.ajax({     
  32.                                 type:"POST",     
  33.                                 url:"{pigcms{:U('Systemvoice/pfajax')}",    
  34.                                 data: {id:id,score:score},  
  35.                                 cache:false, //不缓存此页面     
  36.                                 success:function(data){      
  37.                                     //$("#sc").val(score);  
  38.                                 }   
  39.                             });  
  40.                             //alert('ID: ' + this.id + "\nscore: " + score + "\nevent: " + evt);  
  41.                             $("#sc").val(score);  
  42.                         }  
  43.                     });  
  44.                 });  
  45.                 $("body").unbind("click");  
  46.                     $("a").click(function(){  
  47.                     var href = $(this).attr("href");  
  48.                     window.location.href= href;  
  49.                 });  
  50.         </script>  
  51.     </body>  
  52. </html>  
 

posted on 2017-11-15 10:04  YamaDe  阅读(261)  评论(0)  编辑  收藏  举报

导航