最近接到乙個需求,需要實現列表下拉載入。之前的開發多是使用第三方的外掛程式實現,由於歷史原因,該專案使用了jquery進行開發,藉此實現乙個下拉載入的小例子。
直接上**:
class
="ul"
>
ul>
.ul
li
$
(function()
);// 初始資料
// 遍歷,向ul新增dom
$.each
(data,
function
(i, item));
let isload =
false
;// 防止多次下拉載入,定義乙個開關$(
"ul").
scroll
(function()
let ulh =$(
"ul").
height()
;// dom高度
let scrolltop =$(
"ul").
scrolltop()
;// 滾動距離
let scrollheight = document.
queryselector
("ul"
).scrollheight;
// 滾動高度
// 下拉載入的核心:當滾動垂直距離+可視區高度》滾動的高度計數且isload為false 執行方法
if(scrolltop + ulh >= scrollheight &&
!isload));
},1000);
}});
});
至此,我們就實現了乙個下拉載入的小例子。如有錯誤,可及時聯絡。如果有幫助到你,還請不嗇點贊~ uni 下拉載入更多 uni app下拉載入更多
其實關於載入更多這個外掛程式,官方已經為我們提供了,放在擴充套件元件中,當然這個元件只是為我們實現了上拉載入的按鈕顯示樣式,具體的獲取資料邏輯還是需要我們自己去編寫。效果預覽 轉的有點大,沒工夫找工具了。分析資料結構 我們獲取資料的邏輯是要根據目標介面返給我們的的資料結構來編寫的,我們先來看下目標返...
下拉載入更多
前言 由於專案需要,經理喊我做乙個瀑布流的檢視,在網上找了幾個目前主流的幾個瀑布流解決方案。最後分別研究了各自的解決方案,我選擇了stageredgridview。大家可以在github上找到。但是最後我發現用stageredgridview來實現下拉重新整理 上拉載入更多很不方便,並且stager...
下拉載入更多
element.scrollheight 元素內容高度的度量 包括由於溢位導致的檢視中不可見的內容 element.clientheight 元素內部的高度 包括內邊距,但是不包括水平滾動軸與邊距和外邊距 element.scrolltop 獲取或者設定乙個元素的內容垂直滾動的畫素數。2.判斷乙個元...