iscroll5 上下拉动刷新

标签：des   style   blog   http   java   color   使用   os   

在这我不想说其他写的如何如何，虽然本人不是很会css3，但是修改倒是没问题网上说的iscroll5全改了从4升级5要改动内部代码。

我了个神，修改别人的ok的源码万一哪天又要更谁知道你改的那个。

这个iscroll5的示例包本身就不用改，就能支持上下拉动刷新只不过导入的不是基础的iscroll.js，导入的是iscroll-probe.js

我这里用的jquery是1.8 至于css什么的别关心了，只是把别人写好的拿来改改增强用户体验而已。别说什么

topOffset 这个属性没有什么的，我这就ok。

网上写的拉动刷新是由bug的，当拉动后在快速接着拉动，这时候会执行两次刷新方法和动画我这里解决了这问题

当然我试过修改isScroll.options.xxx属性想禁止滚动。等待我开启滚动。

记住导入isScroll5的js是iscroll-probe.js

[javascript] view plaincopy

 

1. var myScroll;  
2.       var pullDownEl, pullDownL;  
3.       var pullUpEl, pullUpL;  
4.       var Downcount = 0 ,Upcount = 0;  
5.       var loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  
6.       function pullDownAction() {//下拉事件  
7.             setTimeout(function() {  
8.                 var el, li, i;  
9.             el = $(‘#add‘);  
10.             for (i = 0; i < 3; i++) {  
11.                 li = $("<li></li>");  
12.                 Downcount++;  
13.                 li.text(‘new Add ‘ + Downcount + " ！");  
14.                 el.prepend(li);  
15.             }  
16.             pullDownEl.removeClass(‘loading‘);  
17.             pullDownL.html(‘下拉显示更多...‘);  
18.             pullDownEl[‘class‘] = pullDownEl.attr(‘class‘);  
19.             pullDownEl.attr(‘class‘,‘‘).hide();  
20.             myScroll.refresh();  
21.             loadingStep = 0;  
22.         }, 1000); //1秒  
23.       }  
24.       function pullUpAction() {//上拉事件  
25.         setTimeout(function() {  
26.             var el, li, i;  
27.             el = $(‘#add‘);  
28.             for (i = 0; i < 3; i++) {  
29.                 li = $("<li></li>");  
30.                 Upcount++;  
31.                 li.text(‘new Add ‘ + Upcount + " ！");  
32.                 el.append(li);  
33.             }  
34.             pullUpEl.removeClass(‘loading‘);  
35.             pullUpL.html(‘上拉显示更多...‘);  
36.             pullUpEl[‘class‘] = pullUpEl.attr(‘class‘);  
37.             pullUpEl.attr(‘class‘,‘‘).hide();  
38.             myScroll.refresh();  
39.             loadingStep = 0;  
40.         }, 1000);  
41.       }  
42.   
43.       function loaded() {  
44.         pullDownEl = $(‘#pullDown‘);  
45.         pullDownL = pullDownEl.find(‘.pullDownLabel‘);  
46.         pullDownEl[‘class‘] = pullDownEl.attr(‘class‘);  
47.         pullDownEl.attr(‘class‘,‘‘).hide();  
48.           
49.         pullUpEl = $(‘#pullUp‘);  
50.         pullUpL = pullUpEl.find(‘.pullUpLabel‘);  
51.         pullUpEl[‘class‘] = pullUpEl.attr(‘class‘);  
52.         pullUpEl.attr(‘class‘,‘‘).hide();  
53.           
54.         myScroll = new IScroll(‘#content‘, {  
55.             probeType: 2,//probeType：1对性能没有影响。在滚动事件被触发时，滚动轴是不是忙着做它的东西。probeType：2总执行滚动，除了势头，反弹过程中的事件。这类似于原生的onscroll事件。probeType：3发出的滚动事件与到的像素精度。注意，滚动被迫requestAnimationFrame（即：useTransition：假）。  
56.             scrollbars: true,//有滚动条  
57.             mouseWheel: true,//允许滑轮滚动  
58.             fadeScrollbars: true,//滚动时显示滚动条，默认影藏，并且是淡出淡入效果  
59.             bounce:true,//边界反弹  
60.             interactiveScrollbars:true,//滚动条可以拖动  
61.             shrinkScrollbars:‘scale‘,// 当滚动边界之外的滚动条是由少量的收缩。‘clip‘ or ‘scale‘.  
62.             click: true ,// 允许点击事件  
63.             keyBindings:true,//允许使用按键控制  
64.             momentum:true// 允许有惯性滑动  
65.         });  
66.         //滚动时  
67.         myScroll.on(‘scroll‘, function(){  
68.             if(loadingStep == 0 && !pullDownEl.attr(‘class‘).match(‘flip|loading‘) && !pullUpEl.attr(‘class‘).match(‘flip|loading‘)){  
69.             if (this.y > 5) {  
70.                 //下拉刷新效果  
71.                 pullDownEl.attr(‘class‘,pullUpEl[‘class‘])  
72.                 pullDownEl.show();  
73.                 myScroll.refresh();  
74.                 pullDownEl.addClass(‘flip‘);  
75.                 pullDownL.html(‘准备刷新...‘);  
76.                 loadingStep = 1;  
77.             }else if (this.y < (this.maxScrollY - 5)) {  
78.                 //上拉刷新效果  
79.                 pullUpEl.attr(‘class‘,pullUpEl[‘class‘])  
80.                 pullUpEl.show();  
81.                 myScroll.refresh();  
82.                 pullUpEl.addClass(‘flip‘);  
83.                 pullUpL.html(‘准备刷新...‘);  
84.                 loadingStep = 1;  
85.             }  
86.             }  
87.         });  
88.         //滚动完毕  
89.         myScroll.on(‘scrollEnd‘,function(){  
90.             if(loadingStep == 1){  
91.             if (pullUpEl.attr(‘class‘).match(‘flip|loading‘)) {  
92.                     pullUpEl.removeClass(‘flip‘).addClass(‘loading‘);  
93.                 pullUpL.html(‘Loading...‘);  
94.                 loadingStep = 2;  
95.                     pullUpAction();  
96.             }else if(pullDownEl.attr(‘class‘).match(‘flip|loading‘)){  
97.                 pullDownEl.removeClass(‘flip‘).addClass(‘loading‘);  
98.                 pullDownL.html(‘Loading...‘);  
99.                 loadingStep = 2;  
100.                 pullDownAction();  
101.             }  
102.             }  
103.         });  
104.       }  
105.   
106.   
107.       document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);  

css,还是原封不动的

[css] view plaincopy

 

1. * {  
2.     -webkit-box-sizing: border-box;  
3.     -moz-box-sizing: border-box;  
4.     box-sizing: border-box;  
5. }  
6.   
7. html {  
8.     -ms-touch-action: none;  
9. }  
10.   
11. body,ul,li {  
12.     padding: 0;  
13.     margin: 0;  
14.     border: 0;  
15. }  
16.   
17. body {  
18.     font-size: 12px;  
19.     font-family: ubuntu, helvetica, arial;  
20.     overflow: hidden;  
21.     /* this is important to prevent the whole page to bounce */  
22. }  
23.   
24. #header {  
25.     position: absolute;  
26.     z-index: 2;  
27.     top: 0;  
28.     left: 0;  
29.     width: 100%;  
30.     height: 45px;  
31.     line-height: 45px;  
32.     background: #CD235C;  
33.     padding: 0;  
34.     color: #eee;  
35.     font-size: 20px;  
36.     text-align: center;  
37.     font-weight: bold;  
38. }  
39.   
40. #footer {  
41.     position: absolute;  
42.     z-index: 2;  
43.     bottom: 0;  
44.     left: 0;  
45.     width: 100%;  
46.     height: 48px;  
47.     background: #444;  
48.     padding: 0;  
49.     border-top: 1px solid #444;  
50. }  
51.   
52. #content {  
53.     position: absolute;  
54.     z-index: 1;  
55.     top: 45px;  
56.     bottom: 48px;  
57.     left: 0;  
58.     width: 100%;  
59.     background: #ccc;  
60.     overflow: hidden;  
61. }  
62.   
63. #scroller {  
64.     position: absolute;  
65.     z-index: 1;  
66.     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
67.     width: 100%;  
68.     -webkit-transform: translateZ(0);  
69.     -moz-transform: translateZ(0);  
70.     -ms-transform: translateZ(0);  
71.     -o-transform: translateZ(0);  
72.     transform: translateZ(0);  
73.     -webkit-touch-callout: none;  
74.     -webkit-user-select: none;  
75.     -moz-user-select: none;  
76.     -ms-user-select: none;  
77.     user-select: none;  
78.     -webkit-text-size-adjust: none;  
79.     -moz-text-size-adjust: none;  
80.     -ms-text-size-adjust: none;  
81.     -o-text-size-adjust: none;  
82.     text-size-adjust: none;  
83. }  
84.   
85. #scroller ul {  
86.     list-style: none;  
87.     padding: 0;  
88.     margin: 0;  
89.     width: 100%;  
90.     text-align: left;  
91. }  
92.   
93. #scroller li {  
94.     padding: 0 10px;  
95.     height: 40px;  
96.     line-height: 40px;  
97.     border-bottom: 1px solid #ccc;  
98.     border-top: 1px solid #fff;  
99.     background-color: #fafafa;  
100.     font-size: 14px;  
101. }  
102. #pullDown,#pullUp {    
103.     height: 40px;    
104.     line-height: 40px;    
105.     padding: 5px 10px;    
106.     font-weight: bold;    
107.     font-size: 14px;    
108.     color: #888;    
109. }    
110.     
111. #pullDown .pullDownIcon,#pullUp .pullUpIcon {    
112.     display: block;    
113.     float: left;    
114.     width: 40px;    
115.     height: 40px;    
116.     background: url(img/pull-icon@2x.png) 0 0 no-repeat;    
117.     -webkit-background-size: 40px 80px;    
118.     background-size: 40px 80px;    
119.     -webkit-transition-property: -webkit-transform;    
120.     -webkit-transition-duration: 250ms;    
121. }    
122.     
123. #pullDown .pullDownIcon {    
124.     -webkit-transform: rotate(0deg) translateZ(0);    
125. }    
126.     
127. #pullUp .pullUpIcon {    
128.     -webkit-transform: rotate(-180deg) translateZ(0);    
129. }    
130.     
131. #pullDown.flip .pullDownIcon {    
132.     -webkit-transform: rotate(-180deg) translateZ(0);    
133. }    
134.     
135. #pullUp.flip .pullUpIcon {    
136.     -webkit-transform: rotate(0deg) translateZ(0);    
137. }    
138.     
139. #pullDown.loading .pullDownIcon,#pullUp.loading .pullUpIcon {    
140.     background-position: 0 100%;    
141.     -webkit-transform: rotate(0deg) translateZ(0);    
142.     -webkit-transition-duration: 0ms;    
143.     -webkit-animation-name: loading;    
144.     -webkit-animation-duration: 2s;    
145.     -webkit-animation-iteration-count: infinite;    
146.     -webkit-animation-timing-function: linear;    
147. }    
148.     
149. .-webkit-keyframes loading {    
150.     from {     
151.         -webkit-transform:rotate(0deg)translateZ(0);    
152.     }    
153.     
154.     .to {    
155.         -webkit-transform: rotate(360deg) translateZ(0);    
156.     }    
157. }    

html代码块

[html] view plaincopy

 

1. <body onload="loaded()">  
2.     <div id="header">iScroll</div>  
3.   
4.     <div id="content">  
5.         <div id="scroller">  
6.             <div id="pullDown" class="ub ub-pc c-gra">  
7.                 <div class="pullDownIcon"></div>  
8.                 <div class="pullDownLabel">下拉刷新</div>  
9.             </div>  
10.             <ul id="add">  
11.                 <li>Pretty row 1</li>  
12.                 <li>Pretty row 2</li>  
13.                 <li>Pretty row 3</li>  
14.                 <li>Pretty row 4</li>  
15.                 <li>Pretty row 5</li>  
16.                 <li>Pretty row 6</li>  
17.                 <li>Pretty row 7</li>  
18.                 <li>Pretty row 8</li>  
19.                 <li>Pretty row 9</li>  
20.                 <li>Pretty row 10</li>  
21.                 <li>Pretty row 11</li>  
22.                 <li>Pretty row 12</li>  
23.                 <li>Pretty row 13</li>  
24.                 <li>Pretty row 14</li>  
25.                 <li>Pretty row 15</li>  
26.                 <li>Pretty row 16</li>  
27.                 <li>Pretty row 17</li>  
28.                 <li>Pretty row 18</li>  
29.                 <li>Pretty row 19</li>  
30.                 <li>Pretty row 20</li>  
31.                 <li>Pretty row 21</li>  
32.                 <li>Pretty row 22</li>  
33.                 <li>Pretty row 23</li>  
34.                 <li>Pretty row 24</li>  
35.                 <li>Pretty row 25</li>  
36.                 <li>Pretty row 26</li>  
37.                 <li>Pretty row 27</li>  
38.                 <li>Pretty row 28</li>  
39.                 <li>Pretty row 29</li>  
40.                 <li>Pretty row 30</li>  
41.                 <li>Pretty row 31</li>  
42.                 <li>Pretty row 32</li>  
43.                 <li>Pretty row 33</li>  
44.                 <li>Pretty row 34</li>  
45.                 <li>Pretty row 35</li>  
46.                 <li>Pretty row 36</li>  
47.                 <li>Pretty row 37</li>  
48.                 <li>Pretty row 38</li>  
49.                 <li>Pretty row 39</li>  
50.                 <li>Pretty row 40</li>  
51.                 <li>Pretty row 41</li>  
52.                 <li>Pretty row 42</li>  
53.                 <li>Pretty row 43</li>  
54.                 <li>Pretty row 44</li>  
55.                 <li>Pretty row 45</li>  
56.                 <li>Pretty row 46</li>  
57.                 <li>Pretty row 47</li>  
58.                 <li>Pretty row 48</li>  
59.                 <li>Pretty row 49</li>  
60.                 <li>Pretty row 50</li>  
61.             </ul>  
62.             <div id="pullUp" class="ub ub-pc c-gra">  
63.                 <div class="pullUpIcon"></div>  
64.                 <div class="pullUpLabel">上拉显示更多...</div>  
65.             </div>  
66.         </div>  
67.     </div>  
68.   
69.     <div id="footer"></div>  
70.   
71. </body>  

iscroll5 上下拉动刷新,布布扣,bubuko.com

iscroll5 上下拉动刷新

标签：des   style   blog   http   java   color   使用   os   

原文地址：http://www.cnblogs.com/mrxia/p/3868126.html