当前位置 博文首页 > 原生ajax写的上拉加载实例

    原生ajax写的上拉加载实例

    作者:seanlxj 时间:2021-09-21 19:10

    上拉加载的思路

    1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据

    2.所有要获取屏幕的高度 文档的高度 和滚动的高度 下面的代码是已经做好了兼容的可以直接拿来用

    Javascript:
    alert(document.body.clientWidth);  //网页可见区域宽(body)
    alert(document.body.clientHeight);  //网页可见区域高(body)
    alert(document.body.offsetWidth);  //网页可见区域宽(body),包括border、margin等
    alert(document.body.offsetHeight);  //网页可见区域宽(body),包括border、margin等
    alert(document.body.scrollWidth);  //网页正文全文宽,包括有滚动条时的未见区域
    alert(document.body.scrollHeight);  //网页正文全文高,包括有滚动条时的未见区域
    alert(document.body.scrollTop);   //网页被卷去的Top(滚动条)
    alert(document.body.scrollLeft);   //网页被卷去的Left(滚动条)
    alert(window.screenTop);      //浏览器距离Top
    alert(window.screenLeft);      //浏览器距离Left
    alert(window.screen.height);    //屏幕分辨率的高
    alert(window.screen.width);     //屏幕分辨率的宽
    alert(window.screen.availHeight);   //屏幕可用工作区的高
    alert(window.screen.availWidth);   //屏幕可用工作区的宽
     
     
     
    Jquery
    alert($(window).height());       //浏览器当前窗口可视区域高度
    alert($(document).height());      //浏览器当前窗口文档的高度
    alert($(document.body).height());    //浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
    alert($(window).width());       //浏览器当前窗口可视区域宽度
    alert($(document).width());      //浏览器当前窗口文档对象宽度
    alert($(document.body).width());    //浏览器当前窗口文档body的宽度
    alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
    //获取滚动条当前的位置
     function getScrollTop() {
      var scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
       scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
       scrollTop = document.body.scrollTop;
      }
      return scrollTop;
     }
     //获取当前可视范围的高度
     function getClientHeight() {
      var clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
       clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
      } else {
       clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      }
      return clientHeight;
     }
     //获取文档完整的高度
     function getScrollHeight() {
      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
     }
    var upDown = function (opt) {
      opt = opt || {};
      var up = opt.up || function () {
      };
      window.onscroll = function () {
    if (getScrollTop() + getClientHeight() == getScrollHeight()) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
        if(is_scroll === true){ //当这个为true的时候调用up方法 ....is_scroll没看懂往下看
     up();
     }}
      }
     };

    3.首先要默认加载第一页,在window.onload调用upDown这个方法

    window.onload = function () {
      getData();//页面加载完就显示了第一页
      upDown({
       up: getData
      });
     }

    4.当页面滚到底部的时候触发up()这个方法,up调用getdata这个方法.下面就是怎么获取数据了

    在全局定义两个变量 var is_scroll = true;var count = 0;

    var is_scroll = true;
    var count = 0;
    function getAjax() {
      var el, li; 
      var xhr = new XMLHttpRequest();
      xhr.open('get', 'page' + count + '.json'); 
      xhr.send();
      xhr.onreadystatechange = function () {
       var loadingEnd = document.getElementById('loadingEnd');
       var dropLoad = document.getElementById('dropLoad');
       if (xhr.readyState === 4 && xhr.status === 200) {
             
        var res = xhr.responseText;
        var data = JSON.parse(res);
        allData = allData.concat(data);//新的一页拼接到后面;
        if (data.length === 0) { //当获取到的数据长度为0 说明没有count+是请求不到数据了
          is_scroll = true // 定义为true 
         loadingEnd.style.display = 'block'; //显示没有数据
        }
        el = document.querySelector("#wrapper ul"); 
        for (var k in data) { //遍历获取到的每一条数据
         li = document.createElement('li'); // 创建节点
         li.innerHTML = "<div class='item-top'><span class='item-title'>" + data[k].name + "</span><span class='item-money'>" + data[k].money + "</span></div><div class='item-time'>" + data[k].time + "</div><div class='bottom-line'></div>";
         el.appendChild(li, el.childNodes[0]);
        }
        dropLoad.style.display = 'block';//显示加载中
       } else { //这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画
        setTimeout(function () {
         dropLoad.style.display = 'none';
        }, 500)
       }
      };
     }
    <style>
      .drop-load {
       text-align: center;
       height: 80px;
       line-height: 50px;
      }
      .drop-load .loading {
       display: inline-block;
       height: 15px;
       width: 15px;
       border-radius: 100%;
       margin: 6px;
       border: 2px solid #666;
       border-bottom-color: transparent;
       vertical-align: middle;
       -webkit-animation: rotate 0.75s linear infinite;
       animation: rotate 0.75s linear infinite;
      }
      @-webkit-keyframes rotate {
       0% {
        -webkit-transform: rotate(0deg);
       }
       50% {
        -webkit-transform: rotate(180deg);
       }
       100% {
        -webkit-transform: rotate(360deg);
       }
      }
      @keyframes rotate {
       0% {
        transform: rotate(0deg);
       }
       50% {
        transform: rotate(180deg);
       }
       100% {
        transform: rotate(360deg);
       }
      }
      .loadingEnd {
       font-size: 0.3rem;
       color: black;
       width: 100%;
       height: 40px;
       text-align: center;
      }
     </style>
    <body>
    <div>
     <ul>
     </ul>
    </div>
    <div  class="drop-load" style="display: none">
     <span class="loading"></span>
     <span>加载中</span>
    </div>
    <div  class="loadingEnd" style="display: none">到底了</div>
    </body>

    以上这篇原生ajax写的上拉加载实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长博客。

    jsjbwy