移動端上滑實現翻頁功能

admin發表於2017-02-23
本章節分享一段程式碼片段,它實現了再移動端上滑就可以實現翻頁效果。

繫結頁面滾動事件->監聽頁面滑動底部->ajax請求下一頁資料->組裝dom插入頁面。

主要功能程式碼:監聽滑動事件,判斷如果滑動底部觸發請求下一頁面方法。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
$(window).scroll(function () {
  //已經滾動到上面的頁面高度
  var scrollTop = $(this).scrollTop();
  //頁面高度
  var scrollHeight = $(document).height();
  //瀏覽器視窗高度
  var windowHeight = $(this).height();
  //此處是滾動條到底部時候觸發的事件,在這裡寫要載入的資料,或者是拉動滾動條的操作
  if (scrollTop + windowHeight == scrollHeight) {
    dragThis.insertDom();
  }
});


相關文章