模块代码之上拉加载下拉刷新
HTML结构，其中固定命名有，如#wrapper、#scrollbar、#pullDown、#pullUp、.pullDownLabel、.pullUpLabel。如果想更改，则需要在iscrollControl.js中修改。代码如下：
1 <div class="layout" id="wrapper"> 2 <div id="scrollbar"> 3 <div id="pullDown"> 4 <span class="pullDownLabel">下拉刷新...</span> 5 </div> 6 <ul id="thelist"> 7 <li>1</li> 8 <li>2</li> 9 <li>3</li> 10 <li>4</li> 11 </ul> 12 <div id="pullUp"> 13 <span class="pullUpLabel">上拉加载更多...</span> 14 </div> 15 </div> 16 </div>
内部js文件，自定义实现下拉刷新、上拉加载方法：pullDownAction()、pullUpAction()。代码如下：
1 //下拉刷新（自定义实现此方法） 2 function pullDownAction () { 3 setTimeout(function () { //模拟网络堵塞, 设置延迟 4 var el, li, i; 5 el = document.getElementById('thelist'); 6 7 for (i=0; i<3; i++) { 8 li = document.createElement('li'); 9 li.innerHTML = '1'; 10 el.insertBefore(li, el.childNodes[0]); 11 } 12 myScroll.refresh(); //数据加载完成后，调用界面更新方法 (ie: on ajax completion) 13 }, 1000); 14 }
1 function pullUpAction () { 2 setTimeout(function () { 3 var el, li, i; 4 el = document.getElementById('thelist'); 5 for (i=0; i<3; i++) { 6 li = document.createElement('li'); 7 li.innerHTML = '111'; 8 el.appendChild(li, el.childNodes[0]); 9 } 10 myScroll.refresh(); // 数据加载完成后，调用界面更新方法 (ie: on ajax completion) 11 }, 1000); 12 }
外部js文件：iscroll.js、iscrollControl.js;其中iscrollControl.js如下，可根据自己的需求再在对应的函数中添加代码。
1 //初始化绑定iScroll控件 2 var myScroll; 3 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 4 document.addEventListener('DOMContentLoaded', loaded, false); 5 //初始化iScroll控件 6 function loaded() { 7 var pullDownEl = document.getElementById('pullDown'); 8 var pullDownOffset = pullDownEl.offsetHeight; 9 var pullUpEl = document.getElementById('pullUp'); 10 var pullUpOffset = pullUpEl.offsetHeight; 11 12 myScroll = new iScroll('wrapper', { 13 scrollbarClass: 'myScrollbar', /* 重要样式 */ 14 topOffset: pullDownOffset, 15 onRefresh: function () { 16 if (pullDownEl.className.match('loading')) { 17 pullDownEl.className = ''; 18 pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'; 19 } else if (pullUpEl.className.match('loading')) { 20 pullUpEl.className = ''; 21 pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...'; 22 } 23 }, 24 onScrollMove: function () { 25 if (this.y > 5 && !pullDownEl.className.match('flip')) { 26 pullDownEl.className = 'flip'; 27 pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...'; 28 this.minScrollY = 0; 29 } else if (this.y < 5 && pullDownEl.className.match('flip')) { 30 pullDownEl.className = ''; 31 pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'; 32 this.minScrollY = -pullDownOffset; 33 } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { 34 pullUpEl.className = 'flip'; 35 pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...'; 36 this.maxScrollY = this.maxScrollY; 37 } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) { 38 pullUpEl.className = ''; 39 pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...'; 40 this.maxScrollY = pullUpOffset; 41 } 42 }, 43 onScrollEnd: function () { 44 if (pullDownEl.className.match('flip')) { 45 pullDownEl.className = 'loading'; 46 pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...'; 47 pullDownAction(); // Execute custom function (ajax call?) 48 } else if (pullUpEl.className.match('flip')) { 49 pullUpEl.className = 'loading'; 50 pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...'; 51 pullUpAction(); // Execute custom function (ajax call?) 52 } 53 } 54 }); 55 }
