app html5 上拉加载分页

来源:互联网 发布:登录淘宝要脸部拍摄 编辑:程序博客网 时间:2024/05/29 08:01
<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>