模块代码之上拉加载下拉刷新

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 }

 

转载于:https://www.cnblogs.com/shifan/p/5625885.html