首页>>分页>>jquery原生滚屏分页 滚动到指定位置自动加载下一页(2020-02-25)

jquery原生滚屏分页 滚动到指定位置自动加载下一页

jquery原生滚屏分页 滚动到指定位置自动加载下一页
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div>  
  2. <div id="lists"></div>   
  3. <div class="nodata"></div>  
  4. </div>    

 

JavaScript Code
  1. <script type="text/javascript">  
  2.             i = 1; //设置当前页数   
  3.   
  4.             $(function() {  
  5.                 var totalpage = 4; //总页数，防止超过总页数继续滚动  
  6.                 var winH = $(window).height(); //页面可视区域高度   
  7.   
  8.                 $(window).scroll(function() {  
  9.                     if (i < totalpage) { // 当滚动的页数小于总页数的时候，继续加载  
  10.                         var pageH = $(document.body).height();  
  11.                         var scrollT = $(window).scrollTop(); //滚动条top   
  12.                         var aa = (pageH - winH - scrollT) / winH;  
  13.                         if (aa < 0.01) {  
  14.                            getJson(i)  
  15.                         }  
  16.                     } else { //否则显示无数据  
  17.                         showEmpty();  
  18.                     }  
  19.                 });  
  20.                 getJson(0); //加载第一页  
  21.             });  
  22.             function getJson(page) {  
  23.                 $(".nodata").show().html("<img src='../../images/loader-green.gif'/>");  
  24.                 $.getJSON("ajax.php", {page: i}, function(json) {  
  25.                     if (json) {  
  26.                         var str = "";  
  27.                         $.each(json, function(index, array) {  
  28.                             var str = "<div class='per'>";  
  29.                             var str = str + "<div class='title'>" + array['id'] + "、" + array['title'] + "</div></div>";  
  30.                             $("#lists").append(str);  
  31.                         });  
  32.                         $(".nodata").hide()  
  33.                     } else {  
  34.                         showEmpty();  
  35.                     }  
  36.                 });  
  37.                 i++;  
  38.             }  
  39.             function showEmpty() {  
  40.                 $(".nodata").show().html("别滚动了，已经到底了。。。");  
  41.             }  
  42.         </script>  

 

PHP Code
  1. $page = intval($_GET['page']);  //获取请求的页数    
  2.    
  3. $pagenum = 6; //每页数量   
  4. $start = ($page - 1) * $pagenum;   
  5. $query = mysqli_query($lr,"SELECT * FROM product ORDER BY articleid desc LIMIT $start," . $pagenum . "");   
  6. $arr = array();   
  7. while ($row = mysqli_fetch_array($query)) {   
  8.     $arr[] = array(   
  9.         'id' => $row['articleid'],   
  10.         'title' => $row['product_name']   
  11.     );   
  12. }   
  13. if ($arr) {   
  14.     echo json_encode($arr);  //转换为json数据输出    
  15. }  

 


原文地址:http://www.freejs.net/article_fenye_836.html