H5基於iScroll實現下拉重新整理,上拉載入更多

2021-09-07 00:11:40 字數 1612 閱讀 1498

前一段有個手機端的專案需要用到下拉重新整理和上拉載入更多的效果,腦海裡第一反映就是微博那種效果,剛開始的理解有些偏差,以為下拉也是追加資料,上拉也是追加資料,後請教同事後發現其實下拉只是重新整理最新資料而已,上拉是追加資料。

1、引用iscroll.js, 在初始化時新增兩個事件監聽:touchmove、domcontentloaded。

2、實現iscroll外掛程式的onscrollend事件, 也就是在這個事件裡呼叫你自己的ajax方法實現資料的重新整理和追加。

3、上拉載入更多請求後台時就相當於分頁請求資料,這時候需要在ajax請求時傳送pageindex引數,而初始化載入時需要從後台返回乙個pagecount以便前台判斷。

4、最關鍵的就是實現下拉重新整理方法(pulldownaction)和上拉載入更多(pullupaction)方法。

/** * 下拉重新整理 (自定義實現此方法)

* myscroll.refresh(); 資料載入完成後,呼叫介面更新方法

*/function pulldownaction ()

myscroll.refresh(); //資料載入完成後,呼叫介面更新方法

}, 1000);

}/**

* 滾動翻頁 (自定義實現此方法)

* myscroll.refresh(); // 資料載入完成後,呼叫介面更新方法

*/function pullupaction ()

myscroll.refresh(); //資料載入完成後,呼叫介面更新方法

}, 1000);

}/**

* 初始化iscroll控制項

*/function loaded() else if (pullupel.classname.match('loading'))

},onscrollmove: function () else if (this.y < 5 && pulldownel.classname.match('flip')) else if (this.y < (this.maxscrolly - 5) && !pullupel.classname.match('flip')) else if (this.y > (this.maxscrolly + 5) && pullupel.classname.match('flip'))

},onscrollend: function () else if (pullupel.classname.match('flip'))

} }); }

//初始化繫結iscroll控制項

document.addeventlistener('touchmove', function (e) , false);

document.addeventlistener('domcontentloaded', loaded, false);

iscroll5實現下拉載入更多

2 提取iscroll probe.js,選擇這個檔案的原因是我們要給iscroll擴充套件乙個事件,需要用到probetype 屬性 3 修改iscroll probe.js的原始碼,新增上拉監聽事件slideup iscroll 5 原始碼注釋 4 編輯頁面 html 上拉載入更多 css po...

基於iscroll實現下拉和上拉重新整理

這裡,我基於iscroll5的基礎上,進行了少量的改動源 進而實現了下拉屬性的功能,所以分享在這裡,僅供參考。iscroll外掛程式 官網位址 當前最新的版本是version 5版本,相對於版本4,我個人覺得,版本5變得更具有靈活性,雖然移除了一些特定的事件,特定的對外介面,但是對於使用該外掛程式的...

h5 上 刪除 互動 H5頁面基於介面實現資料互動

6 當然就是預算和對時間的要求,使用者體驗度要求不高的話,那可以用h5來做。首先展示兩個我自己編寫的請求介面 獲得資料解析之後填充到h5頁面的通用方法 json格式 可以複製直接使用,已寫好注釋 請求介面 functionajaxforjson url,op,jsondata,array param...