原生ajax写的上拉加载实例

上拉加载的思路

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 id="dropload" class="drop-load" style="display: none">
 <span class="loading"></span>
 <span>加载中</span>
</div>
<div id="loadingend" class="loadingend" style="display: none">到底了</div>
</body>

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