Gunakan jQuery atau js asli untuk melaksanakan tatal tetikus untuk memuatkan data baharu pada page_jquery

Saya percaya ramai orang telah melihat reka letak imej aliran air terjun itu dimuatkan secara dinamik dan kesannya sangat baik. Saya percaya anda telah melihat kesan sedemikian apabila beroperasi dengan tetikus. : Masukkan ruang qq, tarik ke bawah ruang, dan apabila ia mencapai bahagian bawah, ulasan atau log yang tinggal akan dimuatkan secara dinamik Hari ini kita akan melihat idea pelaksanaannya dan kod untuk mengawal pemuatan dinamik menggunakan js.

Kod berikut terutamanya mengawal acara pemuatan apabila bar skrol ditarik ke bawah, sama ada ia memuatkan gambar atau memuatkan data rekod.

Selepas memuatkan perpustakaan jQuery kita boleh menggunakannya seperti ini:

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

    }
  });

Analisis:

Untuk menentukan sama ada bar skrol mencapai bahagian bawah, anda perlu menggunakan tiga nilai atribut ​​ bagi DOM, iaitu scrollTop, clientHeight dan scrollHeight.

• scrollTop ialah jarak tatal bar skrol pada paksi Y.
• clientHeight ialah ketinggian kawasan kandungan yang boleh dilihat.
• ScrollHeight ialah ketinggian kawasan kelihatan kandungan ditambah jarak limpahan (menatal).

Seperti yang dapat dilihat daripada pengenalan ketiga-tiga atribut ini, syarat untuk bar skrol mencapai bahagian bawah ialah scrollTop + clientHeight == scrollHeight.

Dalam js tulen kita boleh melakukan ini:

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