下拉載入更多內容(滾動載入)

2022-08-17 16:21:17 字數 715 閱讀 8467

最近寫專案,要求實現滾動條滾動到底部的時候請求載入更多的資料。要實現此功能首先想到的就是scroll事件,經過查閱資料終於實現此功能,具體原理如下:

首先需要給div加scroll事件,監聽滾動條滾動動作。滾動載入的原理:當滾動條的高度加上 滾動條到div頂部的高度 等於div的可滾動高度時,說明滾動條到底部了,此時便可以觸發向服務端請求資料的ajax請求了。

判斷滾動條是否滾動到底部:

this.scrollheight<=$(this).scrolltop()+$(this).height();

注:如果等滾動條滾動到底部時再載入,會影響使用者的體驗。因為一般動態載入的時候都需要向服務端請求資源,這時需要時間。乙個更佳的方式是:當滾動條距離底部一定距離(c)時,就開始動態載入即向伺服器請求資源。也就是預載入,預讀取。**即:

this.scrollheight-c ==$(this).scrolltop()+$(this).height();

完整的滾動載入**即:

$("滾動區域id").unbind("scroll").bind("scroll", function

(e))

} });

注:該方法在使用之前首先需要引入jquery.js;

$(this).unbind('scroll').bind('scroll',function(){})這樣寫是為了避免重複繫結。

下拉載入更多

前言 由於專案需要,經理喊我做乙個瀑布流的檢視,在網上找了幾個目前主流的幾個瀑布流解決方案。最後分別研究了各自的解決方案,我選擇了stageredgridview。大家可以在github上找到。但是最後我發現用stageredgridview來實現下拉重新整理 上拉載入更多很不方便,並且stager...

下拉載入更多

element.scrollheight 元素內容高度的度量 包括由於溢位導致的檢視中不可見的內容 element.clientheight 元素內部的高度 包括內邊距,但是不包括水平滾動軸與邊距和外邊距 element.scrolltop 獲取或者設定乙個元素的內容垂直滾動的畫素數。2.判斷乙個元...

uni 下拉載入更多 uni app下拉載入更多

其實關於載入更多這個外掛程式,官方已經為我們提供了,放在擴充套件元件中,當然這個元件只是為我們實現了上拉載入的按鈕顯示樣式,具體的獲取資料邏輯還是需要我們自己去編寫。效果預覽 轉的有點大,沒工夫找工具了。分析資料結構 我們獲取資料的邏輯是要根據目標介面返給我們的的資料結構來編寫的,我們先來看下目標返...