hml5 自定义滑动控件

最新推荐文章于 2024-05-30 13:59:14 发布
最新推荐文章于 2024-05-30 13:59:14 发布
阅读量92 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/489302
版权

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


weixin_33688840
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter 与WebView相关的需求整理（推荐）
智玲君
03-16 875
前言 在一款app的开发中，或多或少都离不开要加载H5页面，例如隐私政策，服务协议等页面的加载，或是HTML类型的富文本数据的显示，并且当富文本之中存在超链接的时候，默认情况下点击会跳转打开对应的外部网页，但有时我们并不想在用户点击时显示超链接对应的web页面，而是拦截跳转，打开app内指定的某个页面，又或者是app中新推出一项活动时，先跳转到某个活动的H5页面，然后当用户在H5页面点击了某个按钮后，又打开app内的某个页面，即涉及到H5和Flutter之间的交互，基于以上这些常见的需求，本篇文章将系统的讲
HarmonyOS鸿蒙学习笔记（15）Swiper实现抖音切换视频播放效果
菜鸟博客
11-16 1949
Harmony Swiper实现抖音播放视频效果
HarmonyOS学习——HarmonyOS习题
张豆豆的博客
03-05 4039
HarmonyOS课程学习随堂测试题整理
2024年超详细的-Android超神学习路线总结--纯干货分享（字节，阿里，腾讯大牛联合打造）
2401_84587108的博客
04-25 1876
3、基磁合项目（进程管理手机存空间管理，名单设置和关系话与短信管理控件的优化技巧等（原点）w工具、获取服务端应用版本号、Dag控件更新版本k，代码时执行Co的区别、30旋转效、状态选择器自定义组合控件、 Sharedpreferences读写数据、G5定位，手势识别器定M，获取联系人、超级管理员功能、黑名单、分页加、电话与短信，P 即，打开、详情、分享软件等。2、与底层调用（器）m概念、交又编译、ndk、开发流程a向传数C代码中向a出日志、C回调jva方法等。
2024年超详细的-Android超神学习路线总结--纯干货分享（字节，阿里，腾讯大牛联合打造）(1)
2401_84520332的博客
04-28 980
我的面试经验分享可能不会去罗列太多的具体题目，因为我依然认为面试经验中最宝贵的不是那一个个具体的题目或者具体的答案，而是结束面试时，那一刻你的感受以及多天之后你的回味~很多人在刚接触这个行业的时候或者是在遇到瓶颈期的时候，总会遇到一些问题，比如学了一段时间感觉没有方向感，不知道该从那里入手去学习，对此我整理了一些资料，需要的可以免费分享给大家在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含。
2021年超详细的-Android超神学习路线总结--纯干货分享（字节，阿里，腾讯大牛联合打造）
Android725的博客
03-08 3485
前言 2021年秋招没有找到满意工作的童鞋，考研结果不理想的童鞋，留学生回国的童鞋们，都开始准备2021年的春招了，如果想从事Android开发工作，可以参考本文。 本文整理了Android开发的学习路线和相关的学习资源，非常适合零基础入门Android的同学，希望大家在学习的时候，能够节省时间。纯干货，良心推荐！ （快哭了，收藏是赞的好几倍，球球大家收藏后能再点个赞同，感谢感谢～） 从零基础入门到可以找到工作的程度，大约准备五个月到六个月左右的时间；科班出身，已经学习过java、Android、数据库等一
基于Android的手机安全卫士的开发
weixin_44136909的博客
06-24 3915
基于Android的手机安全卫士的开发 开发环境 处理器：Intel® Core™ i5-5200U CPU 2.20GHz 内存：4GB 硬盘：500GB 操作系统：Windows 7中文版，64位操作系统 开发工具：Eclipse（根据自己的使用工具写） 开发语言：Java 系统主要开发的功能如下： （一）检查和更新版本 打开手机管家首页，会检查本地版本号与服务器端的版本号是否一致，低于服务器端的版本号提示用户更新版本，如果用户选择立即更新，应用在服务器端下载新版本，自动并安装。 （二）手机防盗 （1）
【官方总结】HarmonyOS应用开发常见问题FAQ
热门推荐
HarmonyOS技术社区
12-02 1万+
目录 HarmonyOS开发基础类问题FAQ JS UI开发类问题FAQ Java UI开发类问题FAQ 媒体、数据管理、权限类问题FAQ HarmonyOS开发基础类问题FAQ 1Q：需要使用什么工具进行HarmonyOS应用开发？ A：可使用HUAWEI DevEco Studio（简称DevEco Studio）进行HarmonyOS应用开发。 1>DevEco Studio使用指南详见开发者文档 https://developer.harmo...
CH6- JS UI前端开发
weixin_46227276的博客
01-23 1319
文章目录前言目标1.JS前端开发基础JS FA的使用AceAbility如何加载JS FAJS FA开发目录2.—个典型JS FA应用开发构建页面结构构建页面样式构建页面逻辑适配设备类型3.构建用户界面组件通用特性组件通用属性组件通用样式组件通用事件list组件**tabs组件**dialog组件form组件4.动画静态动画连续动画5.用户交互手势事件触摸按键事件多模输入处理按钮事件6.自定义组件构建引用运行结果7.JS FA调用PA两种PA调用方式FA调用PA常见问题示例：JS端PA端（Ability方式
snow-15s_HML5雪花_
10-03
雪花动画效果 HTML5 倒计时15秒 自动关闭
swipe 手机图片滑动 hml5+css3
03-19
支持android,iphone,手机图片自动滑动效果，html5+css3+jquery+swipe
hml5 制作导航
05-31
hml5 制作导航
hml5_营造树叶随风飘落效果
05-14
hml5_营造树叶随风飘落效果
Web HML5实战合集
04-17
新的 HTML5 规范旨在帮助开发人员更轻松的编写出各类 Web 应用，以顺应当前 SaaS，云计算以及 RIA 等技术的最新趋势。在 HTML5 得以广泛推广之前，开发人员通常使用 SVG，VML 等技术进行 Web 绘图操作，但这些基于 ...
【redis】Spring之RedisTemplate配置与使用
05-30 330
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1199
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
解决renren-fast地图使用echarts报错
最新发布
Start_t的博客
05-30 208
原因：renrenfast 框架 中 plugins预设了 echarts 插件（3.8.5），并且设置了 // 引入外部库, 无需webpack打包处理。如果引用自己安装的echarts 需要 注释掉build\webpack.base.conf.js 中 externals 的echarts。始终报错，无法安装自己定义的echarts版本（5.4.1），console.log出来是3.84。会提示以下错误或者其他。
vscode 创建hml
07-28
5. 在浏览器中打开 HTML 文件。你可以右键点击文件，在上下文菜单中选择 "在默认浏览器中打开"，或者将文件拖放到浏览器窗口中。 这样，你就可以在 VS Code 中创建并查看你的 HTML 文件了。在 `body` 标签中添加更...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值