Verwenden Sie jQuery oder natives JS, um das Scrollen mit der Maus zu implementieren und neue Daten auf page

Verwenden Sie jQuery oder natives JS, um das Scrollen mit der Maus zu implementieren und neue Daten auf page_jquery zu laden

WBOY

Freigeben： 2016-05-16 15:11:57

Original

2000 Leute haben es durchsucht

Ich glaube, viele Leute haben das Wasserfall-Bildlayout gesehen und der Effekt ist sehr gut. Ich glaube, Sie haben einen solchen Effekt gesehen, wenn Sie mit der Maus arbeiten. : Geben Sie den qq-Bereich ein, ziehen Sie den Bereich nach unten, und wenn er den unteren Rand erreicht, werden die verbleibenden Kommentare oder Protokolle dynamisch geladen. Heute werfen wir einen Blick auf ihre Implementierungsideen und den Code zur Steuerung des dynamischen Ladens mithilfe von js.

Der folgende Code steuert hauptsächlich das Ladeereignis, wenn die Bildlaufleiste nach unten gezogen wird, unabhängig davon, ob Bilder oder Datensatzdaten geladen werden.

Nachdem wir die jQuery-Bibliothek geladen haben, können wir sie wie folgt verwenden:

 $(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);

    }
  });

Nach dem Login kopieren

Analyse:

Um festzustellen, ob die Bildlaufleiste den unteren Rand erreicht, müssen Sie drei Attributwerte des DOM verwenden, nämlich scrollTop, clientHeight und scrollHeight.

scrollTop ist der Scrollabstand der Bildlaufleiste auf der Y-Achse.
clientHeight ist die Höhe des sichtbaren Inhaltsbereichs.
ScrollHeight ist die Höhe des sichtbaren Bereichs des Inhalts plus der Überlaufdistanz (Scrolldistanz).

Wie aus der Einführung dieser drei Attribute hervorgeht, lautet die Bedingung, dass die Bildlaufleiste den unteren Rand erreicht, scrollTop + clientHeight == scrollHeight.

In reinem JS können wir Folgendes tun:

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); 
    }); 
   } 
  }

Nach dem Login kopieren