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>
  • 相关阅读:
    linux下php环境的装配以及php storm的链接
    p4 : a problem about "./behavioral-model"
    p4factory下 targets/basic_rout
    P4安装
    第二次结对编程作业——毕业导师智能匹配
    初识GIT
    结对项目之需求分析与原型设计
    调研《构建之法》指导下的全国高校的历届软工实践作品、全国互联网+竞赛、物联网竞赛等各类全国性大学生信息化相关的竞赛平台的历届作品及其看法
    SDN 收集一下最近的资料
    软件工程的实践项目课程的自我目标
  • 原文地址:https://www.cnblogs.com/kangshuai/p/5765767.html
Copyright © 2011-2022 走看看