Utilisez jQuery ou js natif pour implémenter le défilement de la souris afin de charger de nouvelles données sur la page

Utilisez jQuery ou js natif pour implémenter le défilement de la souris afin de charger de nouvelles données sur la page_jquery

WBOY

Libérer： 2016-05-16 15:11:57

original

2001 Les gens l'ont consulté

Je pense que beaucoup de gens ont vu la disposition des images du flux en cascade. Ces images sont chargées dynamiquement et l'effet est très bon. La pression sur le serveur est relativement faible. : Entrez l'espace qq, déroulez l'espace, et lorsqu'il atteint le bas, les commentaires ou journaux restants seront chargés dynamiquement. Aujourd'hui, nous examinerons leurs idées d'implémentation et le code pour contrôler le chargement dynamique à l'aide de js.

Le code suivant contrôle principalement l'événement de chargement lorsque la barre de défilement est abaissée, qu'il s'agisse de charger des images ou de charger des données d'enregistrement.

Après avoir chargé la bibliothèque jQuery, nous pouvons l'utiliser comme ceci :

 $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {

   //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作

//var page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage', page + 1);

    }
  });

Copier après la connexion

Analyse :

Pour déterminer si la barre de défilement atteint le bas, vous devez utiliser trois valeurs d'attribut du DOM, à savoir scrollTop, clientHeight et scrollHeight.

scrollTop est la distance de défilement de la barre de défilement sur l'axe Y.
clientHeight est la hauteur de la zone visible du contenu.
ScrollHeight est la hauteur de la zone visible du contenu plus la distance de débordement (défilement).

Comme le montre l'introduction de ces trois attributs, la condition pour que la barre de défilement atteigne le bas est scrollTop + clientHeight == scrollHeight.

En pur js on peut faire ça :

window.onscroll = function() { 
   var scrollTop = document.body.scrollTop; 
   var offsetHeight = document.body.offsetHeight; 
   var scrollHeight = document.body.scrollHeight; 
   if (scrollTop == scrollHeight - offsetHeight) { 
    page++; 
    loadList(page); 
   } 
  }; 
 
 
function loadList(page) { 
   page = page || 1; 
 
   if (isLoad) { 
    getJSON('/forum.php&#63;mod=hot&page=' + page).then(function(data) { 
     if (data.code == 200) { 
      data = data.data; 
      if (data && Object.keys(data).length > 0) { 
       for (var k in data) { 
        var v = data[k]; 
        detailTemplate = detailTemplate.cloneNode(true); 
        var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; 
        userInfoObj.getElementsByClassName('name')[0].innerText = v.author; 
        userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; 
        userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; 
        detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; 
        detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; 
        var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; 
        extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; 
        extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; 
        postListObj.appendChild(detailTemplate); 
       } 
      } else { 
       isLoad = false; 
      } 
     } else { 
      isLoad = false; 
     } 
    }, function(status) { 
     console.log('Something went wrong, status is ' + status); 
    }); 
   } 
  }

Copier après la connexion