zoukankan      html  css  js  c++  java
  • 加载信息,先从数据库取出5条实现分页,鼠标向上滑动触发Ajax再加载5条,达到异步刷新,优化加载。。。

    php数据库取数据

    <?php 
            include("conn1.php");
            include('../function/functions.php');
            $page=intval($_GET['page']);
            $page=$page==0?1:$page;
            $page_size=5;
            $limit = (($page - 1) * $page_size) . "," . $page_size;
            $sql="select *from v9_news where catid=182 and status=99 order by inputtime desc limit $limit"; 
          
    
             $result=mysqli_query($link,$sql); 
             $arr=array();
             $item=array();
             while($row=mysqli_fetch_assoc($result)){
                 $row['inputtime']= date('m-d',$row['inputtime']);
                 $row['updatetime']= date('m-d',$row['updatetime']);
                  $arr[]=$row;
             }   
             $item['page']=$page;
             $item['item']=$arr; 
             $json=json_encode($item,JSON_UNESCAPED_UNICODE);
             echo $json;
            

    jquery及ajax实现滑动请求加载

      function  onload1(url,a){
                        $.ajax({
                                type: "get",
                                url: url,
                                dataType: "json",
                                data: {
                                    page:0,
                                },
                                success: function(data) {
                                    $(a).html(makehtml0(data));
                               
                                },
                                error: function(i) {
                                    alert("网络错误");
                                }
                            });
                     }
       function scroll1(url){
                 var page=2;
                var old=0;
                var a=true; //开关定时器的作用   
                 //向下滑动
                $("#item1mobile").scroll(function() {
                    var $this = $(this),
                        viewH = $(this).height(), //可见高度312
                        contentH = $(this).get(0).scrollHeight, //内容高度422
                        scrollTop = $(this).scrollTop(); //滚动高度
                    if(scrollTop > old) {
                        if(scrollTop / (contentH - viewH) >= 0.80) { //到达底部80%时,加载新内容
                            if(a){
                            $.ajax({
                                type: "get",
                                url: url,
                                dataType: "json",
                                data: {
                                    page:page,
                                },
                                success: function(data) {
                                    $('#item1mobile').append(makehtml0(data));
                                    page=data.page+1;
                                    a=true;
    
                                },
                                error: function(i) {
                                    alert("网络错误");
                                    a=true;
                                }
                            });
                        }
                        a=false;
                    }
                }
                    //上滑
                    old = scrollTop
                });
    
      }
         var makehtml0 = function (data) {
                var html = '';
                for (var i = 0; i < data.item.length; i++) {
                    
                    html+="<div class='row'>"+"<a href='detail/legaldetail.php?id=" + data.item[i].id
                    + "'>"+" <div class='col-xs-12 content'>"+"<div class='col-xs-12 title'>"
                    +data.item[i].title+"</div>"+" <div class='col-xs-4 date'>"
                    +data.item[i].inputtime+"</div>"+"</div>"+"</a>"+
                    "</div>"+"<div class='fenge111'>"+"</div>";
    
                }
                return html;
            };

    html页面

     <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                
     </div>
    
    
    
    
    
    
    
    <script src="./js/jquery.js"></script>
    <script type="text/javascript">
                 onload1('http://www.zbgh.org.cn/appUnion/data/legal-data-1.php','#item1mobile');
                scroll1('http://www.zbgh.org.cn/appUnion/data/legal-data-1.php');
    </script>
  • 相关阅读:
    二次剩余
    【2020.9.29 NOIP模拟赛 T3】寻梦(fantasy)
    Graph and Queries
    势函数和鞅的停时定理学习笔记
    毒瘤计数题汇总
    2-SAT
    CF559E Gerald and Path
    [SDOI2019]世界地图
    CF1349D Slime and Biscuits
    AT4928 [AGC033E] Go around a Circle
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5765767.html
Copyright © 2011-2022 走看看