js頁面中實現載入更多功能

2022-07-26 01:54:07 字數 824 閱讀 6964

分頁-如何實現載入更多功能,目前的在很多**上使用的載入更多功能中,使用最多的是iscroll.js實現的上拉載入更多、下拉重新整理功能。但是iscroll.js本身並沒有整合載入更多的功能,需要進行自行擴充套件。

最簡單的就是給乙個載入更多的按鈕,實現假分頁載入更多,也就是頁面上是全部的資料,只是按照頁面顯示要求,自己規定顯示部分範圍,其餘隱藏。如果還有資料,點選下載入更多,繼續拉幾條資料;直到沒有更多資料了,就會顯示載入完畢。

載入時顯示「正在載入……」

資料太多想初次載入部分資料,在底部加上「載入更多」按鈕

直到沒有更多資料了,就會顯示載入完畢。

其中 class="loading" 中的loading為自己隨便命名,在這裡以在js頁面上通過c標籤的foreach 方法迴圈遍歷企業名字 來做演示

123

4151617

1920

2122

2324

2526 class="more">載入更多企業

2728

29下面顯示script**部分

這種是最簡單的方法不需要引入任何外掛程式,直接在js頁面上新增script**即可。

這是我第一次使用部落格與大家分享我的**,請各位前輩不吝賜教,多多指點,有什麼問題都可以給我指出,不勝感激。

H5頁面上拉載入更多功能實現

首先定義獲取頁面當前的滾動高度方法 滾動條在y軸上的滾動距離 getscrolltop 文件的總高度 getscrollheight 瀏覽器視口的高度 getwindowheight 其次對當前頁面的滾動高度進行計算 錨點定位 initheight else if scrolltop this.re...

工作筆記之載入更多功能實現

實現思路 1 在前台jsp頁面中,先新增乙個按鈕.繼而為這一按鈕寫一段script方法,在方法中通過ajax來實現文字的傳輸.2 在後台寫乙個action類.通過該類,獲取到後台傳入的資料.3 在struts config.xml中的標籤下,配置一段,將前後臺聯絡起來.前台 之script部分 va...

VUE 實現下拉分頁載入更多功能

html con item v for item in pagearr name div div loading style display none ref loading assets loading.gif 正在載入更多資料 span div text style display none r...