IScroll5实现下拉刷新上拉加载更

来源：互联网发布：系统盘垃圾清理软件编辑：程序博客网时间：2024/04/26 01:07

声明：虽然本文章为原创，但是很大部分参考了博客园博主MRxia的一篇iscroll的下拉刷新的实现方式，我个人把demo简化了一下，具体原来的demo可以参考：点击打开链接

实现效果：类似网易新闻加载新闻列表（好吧，我的只能算是基础版，如要添加动图或者css样式或者canvas效果请自行脑补）

外部引入js文件，必须是iscroll-probe.js，这点是很重要的，因为基础版的 iscroll.js 插件并不支持实例化的IScroll对象的on事件绑定，当然还是要引入jquery简化一下开发

以下是全局的css样式，当然你也可以直接复制过去，前面的是默认的iscroll的demo的样式，后面的pulldown-tips样式是作为绝对定位，当用户下拉不超过40px时显示“下拉刷新”的提示，下拉刷新后会被隐藏起来

<style type="text/css">* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}html {-ms-touch-action: none;}body,ul,li {padding: 0;margin: 0;border: 0;}body {font-size: 12px;font-family: ubuntu, helvetica, arial;overflow: hidden; /* this is important to prevent the whole page to bounce */}#header {position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 45px;line-height: 45px;background: #CD235C;padding: 0;color: #eee;font-size: 20px;text-align: center;font-weight: bold;}#footer {position: absolute;z-index: 2;bottom: 0;left: 0;width: 100%;height: 48px;background: #444;padding: 0;border-top: 1px solid #444;}#wrapper {position: absolute;z-index: 1;top: 45px;bottom: 48px;left: 0;width: 100%;background: #ccc;overflow: hidden;}#scroller {position: absolute;z-index: 1;-webkit-tap-highlight-color: rgba(0,0,0,0);width: 100%;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;}#scroller ul {list-style: none;padding: 0;margin: 0;width: 100%;text-align: left;}#scroller li {padding: 0 10px;height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;border-top: 1px solid #fff;background-color: #fafafa;font-size: 14px;}#pullDown,#pullUp,.pulldown-tips{height:40px;line-height:40px;text-align:center;}.pulldown-tips{position:absolute;top:-40px;left:0;width:100%;}</style>

html结构在默认demo的基础上在scoller里面添加刷新/加载数据提示

<body onload="load()"><div id="header">iScroll</div><div id="wrapper"><div id="scroller"><div id="pullDown" class=""><div class="pullDownLabel"></div></div><div class="pulldown-tips">下拉刷新</div><ul id="list"><li>Pretty row 1</li><li>Pretty row 2</li><li>Pretty row 3</li><li>Pretty row 4</li><li>Pretty row 5</li><li>Pretty row 6</li><li>Pretty row 7</li><li>Pretty row 8</li><li>Pretty row 9</li><li>Pretty row 10</li><li>Pretty row 11</li><li>Pretty row 12</li><li>Pretty row 13</li><li>Pretty row 14</li><li>Pretty row 15</li><li>Pretty row 16</li><li>Pretty row 17</li><li>Pretty row 18</li><li>Pretty row 19</li><li>Pretty row 20</li></ul><div id="pullUp" class=""><div class="pullUpLabel">加载更多</div></div></div></div><div id="footer"></div></body>

js需要说明的是，这里的scroll事件当然不是原生dom的scroll事件，而是IScroll对象的滚动事件，类似touchmove事件，scrollEnd事件也类似touchend事件，在滚动结束后执行

<script type="text/javascript">function load () {var myScroll,pullDown = $("#pullDown"),pullUp = $("#pullUp"),pullDownLabel = $(".pullDownLabel"),pullUpLabel = $(".pullUpLabel"),container = $('#list'),loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新pullDown.hide();pullUp.hide();myScroll = new IScroll("#wrapper", {scrollbars: true,mouseWheel: false,interactiveScrollbars: true,shrinkScrollbars: 'scale',fadeScrollbars: true,scrollY:true,probeType: 2,bindToWrapper:true});myScroll.on("scroll",function(){if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){if(this.y > 40){//下拉刷新操作$(".pulldown-tips").hide();pullDown.addClass("refresh").show();pullDownLabel.text("松手刷新数据");loadingStep = 1;myScroll.refresh();}else if(this.y < (this.maxScrollY - 14)){//上拉加载更多pullUp.addClass("refresh").show();pullUpLabel.text("正在载入");loadingStep = 1;pullUpAction();}}});myScroll.on("scrollEnd",function(){if(loadingStep == 1){if( pullDown.attr("class").match("refresh") ){//下拉刷新操作pullDown.removeClass("refresh").addClass("loading");pullDownLabel.text("正在刷新");loadingStep = 2;pullDownAction();}}});function pullDownAction(){setTimeout(function(){var li, i;for (i = 0,li = ""; i < 3; i++) {li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";}container.prepend(li);pullDown.attr('class','').hide();myScroll.refresh();loadingStep = 0;$(".pulldown-tips").show();},1000);}function pullUpAction(){setTimeout(function(){var li, i;for (i = 0,li = ""; i < 3; i++) {li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";}container.append(li);pullUp.attr('class','').hide();myScroll.refresh();loadingStep = 0;},1000);}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);}</script>

如有出错，欢迎指正 PS：测试环境在firefox的响应式开发环境下运行

1 0