app html5 上拉加载分页

最新推荐文章于 2024-09-15 00:41:42 发布

一只路过的猫咪

最新推荐文章于 2024-09-15 00:41:42 发布

阅读量1.9k

点赞数

分类专栏： html5 文章标签： html5 php

本文链接：https://blog.csdn.net/maosaiwei/article/details/77745407

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<script>
      //文档高度
      function getDocumentTop() {
         var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
         if (document.body) {
            bodyScrollTop = document.body.scrollTop;
         }
         if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
         }
         scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
         return scrollTop;
      }
      //可视窗口高度

      function getWindowHeight() {
         var windowHeight = 0;
         if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
         } else {
            windowHeight = document.body.clientHeight;
         }
         return windowHeight;
      }
      //滚动条滚动高度
      function getScrollHeight() {
         var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
         if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
         }
         if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
         }
         scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
         return scrollHeight;
      }
      window.onscroll = function () {
         //监听事件内容
         if (getScrollHeight() == getWindowHeight() + getDocumentTop()) {
            //当滚动条到底时,这里是触发内容
//            异步请求数据,局部刷新dom
//            var page =$("input[name='push_id']").val();
            var page = parseInt($("#page").val())
            paget = page+1
            var ajax = new XMLHttpRequest();
            var url="{:url('suBmenu')}";
            ajax.open('post',url,true);
            ajax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            ajax.send('page='+paget);
            ajax.onreadystatechange=function(){
               if (ajax.readyState==4&&ajax.status==200) {
                  data=eval("("+ ajax.responseText+")");
                  if(data.status==1){
                     var html="";
                     for(var i=0; i<data.data.length; i++){
                        html+="<div class='product'>";
                        html+="<a href=''>";
                        html+="    <span class='product_img'><img src='"+data.data[i].pict_url+"' alt='' /></span>";
                        html+="<p class='product_title'><span class='tmall'></span>"+data.data[i].title+"</p>";
                        html+="<div class='product_box'>";
                        html+="<div class='product_price'>";
                        html+="<span>￥29.9</span>";
                        html+="<del>￥39.9</del>";
                        html+="</div>";
                        html+="<div class='product_value'>";
                        html+="<span>优惠券</span>"
                        html+="<span>￥5</span>"
                        html+="<p>领券购买</p>"
                        html+="</div>"
                        html+="</div>";
                        html+="</a>";
                        html+="</div>";
                     }
                     var div2 = document.querySelector(".list");
                     div2.insertAdjacentHTML("beforeend",html);//在调用元素内部后面添加一个子元素 即取代了最后的子元素
                     var page = parseInt($("#page").val())
                     document.getElementById("page").value=page+1;
                  }else{
                     alert(data.info);
                  }
               }
            }
         }
      }
   </script>