Ajax natif implémente la fonction de chargement pull-up

Cette fois, je vais vous présenter la fonction de chargement pull-up de l'ajax natif. Quelles sont les précautions pour implémenter la fonction de chargement pull-up de l'ajax natif Voici un cas pratique, prenons un. regarder.

L'idée du chargement pull-up

1 Le chargement pull-up est de déclencher l'événement ajax pour demander des données lorsque l'écran est tiré vers le bas

2. Tous les codes ci-dessous qui doivent obtenir la hauteur de l'écran, la hauteur du document et la hauteur de défilement sont déjà compatibles et peuvent être utilisés directement

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 .Tout d'abord, chargez la première page par défaut et appelez la méthode upDown dans window.onload

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

4. Lorsque la page défile vers le bas, la méthode up() est. déclenché et up appelle la méthode getdata. Ce qui suit est Comment obtenir des données

Définir deux variables globalement var is_scroll = true; var count = 0; >Je pense que vous l'avez maîtrisé après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

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 = "<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 = 'block';//显示加载中
   } else { //这个可有可无 是个假的 不管请求没有请求到都会有个加载中的动画
    setTimeout(function () {
     dropLoad.style.display = 'none';
    }, 500)
   }
  };
 }

Lecture recommandée :

<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>

Utiliser Ajax et les formulaires pour implémenter les fonctions requises pour les utilisateurs enregistrés

ajax pour implémenter une tarte dynamique graphiques et colonnes Explication détaillée des diagrammes graphiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!