집 >웹 프론트엔드 >JS 튜토리얼 >네이티브 Ajax로 작성된 풀업 로딩 예제(그래픽 튜토리얼)

네이티브 Ajax로 작성된 풀업 로딩 예제(그래픽 튜토리얼)

亚连원래의: 2018-05-21 16:20:081774검색

아래에서는 네이티브 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(&#39;get&#39;, &#39;page&#39; + count + &#39;.json&#39;); 
  xhr.send();
  xhr.onreadystatechange = function () {
   var loadingEnd = document.getElementById(&#39;loadingEnd&#39;);
   var dropLoad = document.getElementById(&#39;dropLoad&#39;);
   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 = &#39;block&#39;; //显示没有数据
    }
    el = document.querySelector("#wrapper ul"); 
    for (var k in data) { //遍历获取到的每一条数据
     li = document.createElement(&#39;li&#39;); // 创建节点
     li.innerHTML = "<p class=&#39;item-top&#39;><span class=&#39;item-title&#39;>" + data[k].name + "</span><span class=&#39;item-money&#39;>" + data[k].money + "</span></p><p class=&#39;item-time&#39;>" + data[k].time + "</p><p class=&#39;bottom-line&#39;></p>";
     el.appendChild(li, el.childNodes[0]);
    }
    dropLoad.style.display = &#39;block&#39;;//显示加载中
   } else { //这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画
    setTimeout(function () {
     dropLoad.style.display = &#39;none&#39;;
    }, 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>
<p>
 <ul>
 </ul>
</p>
<p id="dropLoad" class="drop-load" style="display: none">
 <span class="loading"></span>
 <span>加载中</span>
</p>
<p id="loadingEnd" class="loadingEnd" style="display: none">到底了</p>
</body>

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 됩니다.

네이티브 Ajax로 작성된 풀업 로딩 예제(그래픽 튜토리얼)

관련 기사