Updownload.js
基于iSroll 5.0實現的上拉加載和下拉刷新插件
移動端效果比較好，開發者工具打開后，需要刷新下頁面。
[演示地址:] 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>兩個容器iscroll_wrap和iscroll；
iscroll為滾動元素，iscroll_wrap為固定大小的容器。
可以在iscroll里新建列表等
2.樣式和圖片
<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%; 是避免內容高度小于.iscroll_wrap 的高度時，無法使用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>注：
iscroll的min-height: 101%; 是避免內容高度小于.iscroll_wrap的高度時，無法使用iScroll
3.引入js文件
<script src="iscroll-probe.js"></script> // 引入iScroll插件
<script src="./js/updownload.js"></script> // 擴展的源碼
<script type="text/javascript">// 1.創建實例var myRefresh = new UpDownLoad( "#iscroll_wrap" );// 2.綁定事件 myRefresh.on("pullDown", function (d) {// 下拉事件觸發行為myRefresh.success(function (d) {// 刷新成功后執行});myRefresh.error(function (d) {// 刷新失敗后執行});}).on("pullUp",function (d) {// 上拉事件觸發行為myRefresh.success(function (d) {// 上拉成功后執行 });myRefresh.error(function (d) {// 上拉失敗后執行});});</script>注意：
上拉和下拉都有兩個狀態。為了顯示成功狀態之前執行刷新DOM，需要將操作DOM的行為放在回調里執行。
myRefresh.success(fn);
myRefresh.error(fn);
如果想看具體實現，可以查看代碼源文件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%; 是避免內容高度小于.iscroll_wrap 的高度時，無法使用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');// 延時器模擬正在加載效果var taskWrap = document.querySelector(".task_wrap");taskWrap.innerHTML = "";setTimeout(function (res) {// 刷新成功后執行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>";});// 刷新失敗后執行// myRefresh.error();}, 1000);} ).on("pullUp", function (d) {console.log('pullUp');setTimeout(function (res) {// 加載成功后執行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);});// 加載失敗后執行// myRefresh.error();}, 1000);});};
</script>
</html>關注我
github [https://github.com/chenyk2016]
博客園 [https://home.cnblogs.com/u/chenykblog/]
![[小白進] 大佬們學習為什么簡單？小白該如何學習？學歷不高如何找工作？副業很好賺？了解后少走彎路](http://pic.xiahunao.cn/[小白進] 大佬們學習為什么簡單？小白該如何學習？學歷不高如何找工作？副業很好賺？了解后少走彎路)
 頁面開發之博客文章列表)
