AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

hml5 自定义滑动控件

2017-11-12 997
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

ys_scroll.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.ys-scroll-wrapper{
     position : relative ;
     overflow :  auto ;
     -webkit-overflow-scrolling: touch;
}
 
.ys-scroll-wrapper .ys-scroll-content{
     min-height : 100% ;
}
 
 
/* loading-top */
.ys-scroll-wrapper .loading- top  {
     display : block ;
     width : 100% ;
     height : 40px ;
     line-height :  40px ;
     text-align :  center ;
}
/* loading-bottom */
.ys-scroll-wrapper .loading- bottom  {
     display : block ;
     width : 100% ;
     height : 40px ;
     line-height :  40px ;
     text-align :  center ;
}
 
/* loading-bottom */
.ys-scroll-wrapper .loading-end {
     display : none ;
     width : 100% ;
     height : 40px ;
     line-height :  40px ;
     text-align :  center ;
}

ys_scroll.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
( function ($){
 
     var  defaultSettings = {
         hasArrivedEnd: false , // 是否已经到底部
         pulldownCallback: function (){  // 下拉回调
             console.log( "pull down ... " );
 
         },
         pullupCallback: function (){  // 上拉回调
             console.log( "pull up ... " );
         }
     };
 
 
     function  render(target,settings){
 
         var  container = target;
         var  childrenNode = $(container).children().remove();
         $(container).addClass( "ys-scroll-wrapper" );
 
         $(container).append( "<div class='loading-top'>加载中...</div>" );
         $(container).append( "<div class='ys-scroll-content'></div>" );
         $(container).append( "<div class='loading-bottom'>加载更多...</div>" );
         $(container).append( "<div class='loading-end'>已经到底了</div>" );
 
 
         $(container).find( ".ys-scroll-content" ).append(childrenNode);
 
         $(container).scrollTop(LOADING_BAR_HEIGHT);
 
         $(container).data( "settings" ,settings);
         return  container;
     }
 
     function  bindEventHandlers(target,container,settings){
 
 
         var  loadingTopRevertTimeout =  null ;
         var  loadingTopEndTimeout =  null ;
 
         var  loadingBottomRevertTimeout =  null ;
         var  loadingBottomTimeout =  null ;
 
         var  pulldownCallback = settings.pulldownCallback;
         var  pullupCallback = settings.pullupCallback;
 
         function  clearTimeouts(){
             clearTimeout(loadingTopRevertTimeout);
             clearTimeout(loadingTopEndTimeout);
             clearTimeout(loadingBottomRevertTimeout);
             clearTimeout(loadingBottomTimeout);
         }
 
         function  scrollHandler(){
             clearTimeouts();
 
             var  loadingTop =  false ;
 
             if (arriveLoadingTopStart(container)){
                 loadingTopRevertTimeout = setTimeout( function (){
                     loadingTopRevert(container);
                 },RESPONSE_DELAY);
                 loadingTop =  true ;
             }
 
             if (arriveLoadingTopEnd(container)){
                 clearTimeouts();
 
                 loadingTopEndTimeout = setTimeout( function (){
                     resetLoading(container);
                     pulldownCallback();
                 },RESPONSE_DELAY);
                 loadingTop =  true ;
             }
 
             var  hasArrivedEnd = $(container).data( "settings" ).hasArrivedEnd;
             if (hasArrivedEnd||loadingTop){  // 如果已经到底了不需要额外操作
                 return ;
             }
 
 
             if (arriveLoadingBottomStart(container)){
                 loadingBottomRevertTimeout = setTimeout( function (){
                     loadingBottomRevert(container);
                 },RESPONSE_DELAY);
             }
 
             if (arriveLoadingBottomEnd(container)){
                 clearTimeouts();
 
                 loadingBottomTimeout = setTimeout( function (){
                     pullupCallback();
                 },RESPONSE_DELAY)
             }
         }
 
 
         var  hasPressed =  false ;
         $(container).on( "touchstart" , function (event){
             hasPressed =  true ;
             clearTimeouts();
             stopAnimation(container);
         });
 
         $(container).on( "touchmove" , function (event){
 
             hasPressed =  true ;
             clearTimeouts();
             stopAnimation(container);
 
             var  clientX = event.originalEvent.changedTouches[0].clientX;
             var  clientY = event.originalEvent.changedTouches[0].clientY;
             if (clientY<0||clientX<0){
                 scrollHandler();
             }
         });
 
         $(container).on( "touchend touchcancel" , function (event){
             scrollHandler();
             hasPressed =  false ;
         });
 
         $(container).scroll( function (){
             if (hasPressed||reverting){
                 return ;
             }
             scrollHandler();
         });
     }
 
     var  RESPONSE_DELAY = 800;  // 触发延迟
     var  ANIMATION_DURATION = 300;  // 动画持续时间
     var  LOADING_BAR_HEIGHT = 40;  // loading bar 高度
 
     var  reverting =  false ;  // 动画正在恢复
 
     function  stopAnimation(container){
         $(container).stop( true );
         reverting =  false ;
     }
 
     function  loadingTopRevert(container){
         reverting =  true ;
         $(container).animate({
             "scrollTop" :LOADING_BAR_HEIGHT+ "px"
         },ANIMATION_DURATION, function (){
             reverting =  false ;
         });
     }
 
     /* 判断达到 Loading-top开始处 */
     function  arriveLoadingTopStart(container){
         var  scrollTop = $(container).scrollTop();
         if (scrollTop<LOADING_BAR_HEIGHT){
             return  true ;
         }
         return  false ;
     }
 
     /* 判断达到 Loading-top结束处 */
     function  arriveLoadingTopEnd(container){
         var  scrollTop = $(container).scrollTop();
 
         if  (scrollTop<1) {
             return  true ;
         }
         return  false ;
     }
 
     function  loadingBottomRevert(container){
         reverting =  true ;
         var  clientHeight = $(container).height();
         var  scrollTop = $(container)[0].scrollHeight-LOADING_BAR_HEIGHT-clientHeight;
         $(container).animate({
             "scrollTop" :scrollTop+ "px"
         },ANIMATION_DURATION, function (){
             reverting =  false ;
         });
 
     }
 
     /* 判断到达 Loading Bottom 开始处 */
     function  arriveLoadingBottomStart(container){
         var  scrollTop = $(container).scrollTop();
         var  scrollHeight = $(container)[0].scrollHeight;
         var  clientHeight = $(container).height();
 
 
         if  (scrollTop + clientHeight+LOADING_BAR_HEIGHT>= scrollHeight) {
             return  true ;
         }
         return  false ;
     }
 
     /* 判断到达 Loading Bottom 结束处 */
     function  arriveLoadingBottomEnd(container){
         var  scrollTop = $(container).scrollTop();
         var  scrollHeight = $(container)[0].scrollHeight;
         var  clientHeight = $(container).height();
         if  (scrollTop + clientHeight+1> scrollHeight) {
             return  true ;
         }
         return  false ;
     }
 
     /* 重设 loading */
     function  resetLoading(container){
         $(container).data( "settings" ).hasArrivedEnd= false ;
         $(container).find( ".loading-bottom" ).show();
         $(container).find( ".loading-end" ).hide();
     }
 
     /* 设置loading end */
     function  setLoadingEnd(container){
         $(container).data( "settings" ).hasArrivedEnd= true ;
         $(container).find( ".loading-bottom" ).hide();
         $(container).find( ".loading-end" ).show();
     }
 
 
 
     var  options = {
         ysScroll: function (settings) {
             var  mergedSettings = {};
             $.extend(mergedSettings,defaultSettings,settings);
 
 
             $( this ).each( function (){
                 var  container = render( this ,settings);
                 $(container).data( "settings" ,settings);
                 bindEventHandlers( this ,container,mergedSettings);
             });
         },
         ysScrollRefresh: function (){
             if (arriveLoadingTopStart( this )){
                 loadingTopRevert( this );
             }
 
             if (arriveLoadingBottomStart( this )){
                 loadingBottomRevert( this );
             }
         },
 
         ysScrollLoadEnd: function (){
             setLoadingEnd( this );
         }
     };
     $.fn.extend(options);
})(jQuery);

测试页面 scroll.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->  < html  class = "no-js" >  <!--<![endif]-->
< head >
     < meta  charset = "utf-8" >
     < meta  http-equiv = "X-UA-Compatible"  content = "IE=edge,chrome=1" >
     < title ></ title >
     < meta  name = "description"  content = "" >
     < meta  name = "viewport"  content = "width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" >
     < meta  name = "format-detection"  content = "telephone=no" >
     < link  href = "css/common/ys_scroll.css"  rel = "stylesheet" >
     < style >
         html,body,.container{
             height:100%;
             margin:0;
             padding:0;
         }
     </ style >
</ head >
< body >
< div  class = "container" >
     < ul >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
         < li >这是测试数据...</ li >
     </ ul >
</ div >
 
< script  src = "dist/js/jquery-1.11.3.min.js" ></ script >
< script  src = "js/common/ys_scroll.js" ></ script >
 
< script >
     var dataHtml = $(".container ul").html();
 
     $(".container ").ysScroll({
         pulldownCallback:function(){ // 下拉回调
             console.log("pull down ... ");
 
             $(".container ul").html(dataHtml);
             $(".container ").ysScrollRefresh();
         },
         pullupCallback:function(){ // 上拉回调
             console.log("pull up ... ");
             $(".container  ul").append(dataHtml);
             $(".container ").ysScrollRefresh();
         }
     });
</ script >
</ body >
</ html >

注:容器使用前要给其设置一个固定的高度。当触发pulldownCallback,pullupCallback回调后一定要使用$(".container").ysScrollRefresh();重置容器。


 本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/1844427


文章标签：
容器
Web App开发
测试技术
JavaScript
科技小能手
目录
相关文章
vohelon
|
7月前
|
Android开发
在mPaaS框架中，要自定义通知栏背景色
【1月更文挑战第13天】【1月更文挑战第65篇】在mPaaS框架中，要自定义通知栏背景色
vohelon
63 1
代码迷途
|
API C# Windows
Winform控件优化之无边框窗体及其拖动、调整大小和实现最大最小化关闭功能的自定义标题栏效果
Winform中实现无边框窗体只需要设置FormBorderStyle = FormBorderStyle.None，但是无边框下我们需要保留移动窗体、拖拽调整大小、自定义美观好看的标题栏等...
代码迷途
3668 0
Winform控件优化之无边框窗体及其拖动、调整大小和实现最大最小化关闭功能的自定义标题栏效果
郏国上
|
7月前
自定义滑动工具栏
自定义滑动工具栏
郏国上
51 0
咕噜咕噜wy
|
7月前
|
前端开发 JavaScript 定位技术
高德地图实现-自定义信息窗+窗体点击事件
高德地图实现-自定义信息窗+窗体点击事件
咕噜咕噜wy
547 0
丶布布
|
7月前
|
索引
[Qt5&控件] 下拉框ComBoBox和层叠窗口StackedWidget控件组合使用
[Qt5&控件] 下拉框ComBoBox和层叠窗口StackedWidget控件组合使用
丶布布
177 0
快乐阿超
自定义scroll滑块样式
自定义scroll滑块样式
快乐阿超
69 0
游客fcvboot535try
|
C++
2.9 显示控件
2.9 显示控件
游客fcvboot535try
132 0
2.9 显示控件
小编学it
|
Android开发
Android 自定义控件之SlidingMenuVertical顶部悬浮(垂直折叠抽屉，有滑动渐变回调，可自行添加渐变动画)
顶部悬浮(垂直折叠抽屉，有滑动渐变回调，可自行添加渐变动画)
小编学it
2077 0
最美的回忆
|
Web App开发 前端开发 JavaScript
基于flipsnap框架，滑动页面的布局
最美的回忆
1133 0
范大脚脚
复合控件、组合控件、自定义服务控件
范大脚脚
1191 0