上拉刷新-下拉加载 dom样式要求：
刷新与加载什么时候触发？根据的是滚动区域的顶部和底部 与 外部盒子的顶部和底部距离判断的；
外部盒子不能动，那么就要定外部盒子的高度了（100%），外部盒子高度等于屏幕的高度。
依赖：jquery-2.1.4.js/iscroll.js/pullToRefresh.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, minimum-scale = 1.0, user-scalable = no"> <link rel="stylesheet" href="../src/css/reset.css"> <link rel="stylesheet" href="../src/css/pullToRefresh.css"> <script type="text/javascript" src="../src/js/pullToRefresh.js"></script> <script type="text/javascript" src="../src/js/jquery-2.1.4.js"></script> <script type="text/javascript" src="../src/js/iscroll.js"></script> <style> html,body{ position: relative; width:100%; height: 100%; margin:0; padding:0; } #wrapper{ position: relative; min-height:100%; } .dataimg{ display: block; width:40%; margin:10% auto; } </style> </head> <body> <div id="wrapper"> <ul> <li><img class="dataimg" src="../src/img/bank_ABC.png" alt=""></li> <li><img class="dataimg" src="../src/img/bank_BCM.png" alt=""></li> <li><img class="dataimg" src="../src/img/bank_BOC.png" alt=""></li> </ul> </div> <script> refresher.init({ id:"wrapper", pullDownAction:Refresh, pullUpAction:Load }); var data=['../src/img/bank_CCB.png','../src/img/bank_CIB.png','../src/img/bank_CMB.png'] function Refresh() { setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production! var el, li, i; el =document.querySelector("#wrapper ul"); //这里写你的刷新代码 el.innerHTML = ''; for (i=0; i<data.length; i++) { li = document.createElement('li'); li.innerHTML='<img class="dataimg" src="'+data[i]+'" alt="" />' el.appendChild(li, el.childNodes[0]); } document.getElementById("wrapper").querySelector(".pullDownIcon").style.display="none"; document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML="<img src='../src/img/ok.png'/>刷新成功"; setTimeout(function () { wrapper.refresh(); document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML=""; },1000);//模拟qq下拉刷新显示成功效果 /****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/ }, 1000); } function Load() { setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production! var el, li, i; el =document.querySelector("#wrapper ul"); for (i=0; i<data.length; i++) { li = document.createElement('li'); li.innerHTML='<img class="dataimg" src="'+data[i]+'" alt="" />' el.appendChild(li, el.childNodes[0]); } wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/ },1000); } </script> </body> </html>