當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

基于iSroll 5.0实现的上拉加载和下拉刷新插件

發(fā)布時(shí)間：2023/12/6 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了基于iSroll 5.0实现的上拉加载和下拉刷新插件小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Updownload.js

基于iSroll 5.0實(shí)現(xiàn)的上拉加載和下拉刷新插件

移動(dòng)端效果比較好，開(kāi)發(fā)者工具打開(kāi)后，需要刷新下頁(yè)面。

[演示地址:] https://chenyk2016.github.io/upDownLoad/demo.html
[github地址:] https://github.com/chenyk2016/upDownLoad/

效果圖

1.建立html

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>下拉刷新，上拉加載</title> </head> <body> <h2>IScroll上拉加載下拉刷新</h2> <div class="iscroll_wrap" id="iscroll_wrap"><div class="iscroll"><div class="task_wrap" ><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P></div></div> </div> </body> </html>

兩個(gè)容器iscroll_wrap和iscroll；
iscroll為滾動(dòng)元素，iscroll_wrap為固定大小的容器。
可以在iscroll里新建列表等

2.樣式和圖片

注：
iscroll的min-height: 101%; 是避免內(nèi)容高度小于.iscroll_wrap的高度時(shí)，無(wú)法使用iScroll

3.引入js文件

注意：
上拉和下拉都有兩個(gè)狀態(tài)。為了顯示成功狀態(tài)之前執(zhí)行刷新DOM，需要將操作DOM的行為放在回調(diào)里執(zhí)行。
myRefresh.success(fn);
myRefresh.error(fn);
如果想看具體實(shí)現(xiàn)，可以查看代碼源文件updownload.js

完整演示

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>下拉刷新，上拉加載</title><style type="text/css"> *{ padding: 0;margin: 0; } h2{ text-align: center; border-bottom: 1px solid #ccc; height: 40px; background-color: #eee; } .iscroll_wrap { position: absolute; top: 40px; bottom: 0; width: 100%; background-color: #ccc; overflow: hidden; } /* min-height: 101%; 是避免內(nèi)容高度小于.iscroll_wrap 的高度時(shí)，無(wú)法使用iScroll*/ .iscroll { position: absolute; top: 0; left: 0; width: 100%; min-height: 101%; background-color: #fff; } .iscroll .loading { background: url(./img/loading.gif) no-repeat left center; padding-left: 30px; }</style> </head> <body> <h2>IScroll上拉加載下拉刷新</h2> <div class="iscroll_wrap" id="iscroll_wrap"><div class="iscroll"><div class="task_wrap" ><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P><P>das</P></div></div> </div></body> <script src="iscroll-probe.js"></script> <script src="./js/updownload.js"></script> <script type="text/javascript">// 使用window.onload = function () {var myRefresh = new UpDownLoad( "#iscroll_wrap" );myRefresh.on("pullDown", function (d) {console.log('pullDown');// 延時(shí)器模擬正在加載效果var taskWrap = document.querySelector(".task_wrap");taskWrap.innerHTML = "";setTimeout(function (res) {// 刷新成功后執(zhí)行myRefresh.success(function (d) {var taskWrap = document.querySelector(".task_wrap");taskWrap.innerHTML = "<p>刷新as</p><p>a刷新s</p><p>刷新as</p><p>as</p><p>as</p><p>as</p><p>as</p><p>as</p><p>as</p><p>as</p>";});// 刷新失敗后執(zhí)行// myRefresh.error();}, 1000);} ).on("pullUp", function (d) {console.log('pullUp');setTimeout(function (res) {// 加載成功后執(zhí)行myRefresh.success(function () {var taskWrap = document.querySelector(".task_wrap");var dom = document.createElement("div");dom.innerHTML = "<p>加載</p><p>加載</p><p>加載</p><p>加載</p><p>加載</p><p>加載</p><p>as</p><p>as</p><p>as</p><p>as</p><p>as</p><p>as</p>";taskWrap.appendChild(dom);});// 加載失敗后執(zhí)行// myRefresh.error();}, 1000);});}; </script> </html>

關(guān)注我

github [https://github.com/chenyk2016]
博客園 [https://home.cnblogs.com/u/chenykblog/]

轉(zhuǎn)載于:https://www.cnblogs.com/chenykblog/p/7750067.html

總結(jié)

以上是生活随笔為你收集整理的基于iSroll 5.0实现的上拉加载和下拉刷新插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： List 集合转换为String
下一篇： CMDB资产采集