iscroll
在原生APP
的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP
的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS
系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP
的内容展示,有更灵活的满足更新版本。
概述
但是有一点就是,如何让web
实现的页面,看起来更像是原生的APP
呢,首先要想办法解决的就是下拉刷新的功能,对于这个功能,我并没有在网络上找到很好的解决方法,并且,我个人对手机端的开发,经验还是有些欠缺,这里就不罗列使用JS
实现web
页下拉刷新的功能了。
这里,我基于iscroll5
的基础上,进行了少量的改动源代码,进而实现了下拉属性的功能,所以分享在这里,仅供参考。
关于iscroll插件
iscroll
插件(官网地址)当前最新的版本是version 5
版本,相对于版本4
,我个人觉得,版本5
变得更具有灵活性,虽然移除了一些特定的事件,特定的对外接口,但是对于使用该插件的程序员们,这个插件变得更具有操控性,这是我比较喜欢的一种插件类型,但同时,也发现了一些问题,事件中的touchend
事件,不存在了(确切的说,不能说是不存在),只是被拦截了,所以一些基本的事件,都被进行了拦截,而导致无法监听到touchend
事件,只能检测到scrollEnd
事件,scrollEnd
事件,是在页面滚动停止时,才会被触发的,所以~~
所以,根据版本5
,无法检测到,是不是下拉了一段距离之后,松开时的动作了,对此,我也检查了源代码,也没有发现这个功能的实现方法,不得已,只能对源代码进行了少量的修改,所以就有了本篇文章。
修改后插件的使用
基本上,该方法并没有进行多少的修改,只是添加了两个事件的监听类型,一个叫做“slideDown
”,表示下拉被触发,另一个叫做“slideUp
”,表示上拉被触发。
其他,实例化中,各属性都没有进行更改,所以,关于iscroll
的使用,直接参考官网的说明:iscroll官网。
这里,我只对新添加的事件,添加一个demo
测试,这个demo
是一个很简单的demo
,也只是用来说明新添加事件的用法的,如果需要用到下拉刷新或者上拉刷新的朋友,可以根据本demo
自行修改。
<div id="wrapper">
<div id="scroller">
<div id = "scroller-pullDown">
<span id = "down-icon" class = "icon-double-angle-down pull-down-icon"></span>
<span id = "pullDown-msg" class = "pull-down-msg">下拉刷新</span>
</div>
<div id = "scroller-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
...
<li>Pretty row 46</li>
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
<div id = "scroller-pullUp">
<span id = "up-icon" class = "icon-double-angle-up pull-up-icon"></span>
<span id = "pullUp-msg" class = "pull-up-msg">上拉刷新</span>
</div>
</div>
</div>
CSS部分这里就不多说了,有兴趣的可以直接保存该网页,然后把相关代码分离即可,对应的JS
和CSS
代码,分别为iscroll.js
和iscroll.css
文件,其他的bootstrap
和jQuery
都是我懒的原因,加入的框架。
对上述的结构进行实例化:
var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon"); myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });
//probeType属性,表明此插件,可以监听scroll事件 myScroll.on("scroll",function(){
//scroll事件,可以用来控制上拉和下拉之后显示的模块中,
//样式和内容展示的部分的改变。
var y = this.y,
maxY = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon"); if(y >= 40){
!downHasClass && downIcon.addClass("reverse_icon");
return "";
}else if(y < 40 && y > 0){
downHasClass && downIcon.removeClass("reverse_icon");
return "";
} if(maxY >= 40){
!upHasClass && upIcon.addClass("reverse_icon");
return "";
}else if(maxY < 40 && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon");
return "";
}
}); myScroll.on("slideDown",function(){
//当下拉,使得边界超出时,如果手指从屏幕移开,则会触发该事件
if(this.y > 40){
//获取内容于屏幕拉开的距离
//可以在该部分中,修改样式,并且仅限ajax或者其他的一些操作
//此时只是为了能演示该功能,只添加了一个alert功能。
//并且,由于alert会阻塞后续的动画效果,所以,
//添加了后面的一行代码,移除之前添加上的一个样式
alert("slideDown");
upIcon.removeClass("reverse_icon");
}
}); myScroll.on("slideUp",function(){
if(this.maxScrollY - this.y > 40){
//与slideDown相同的,maxScrollY表示文档区域的最大高度
alert("slideUp");
upIcon.removeClass("reverse_icon")
}
});
iscroll的更多相关文章
- 【IScroll深入学习】解决IScroll疑难杂症
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
- 使用 iscroll 实现焦点图无限循环
现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- H5基于iScroll实现下拉刷新,上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
- iscroll总结
iScroll基本信息 官网:http://cubiq.org/iscroll-4 更新:2012.07.14 版本:v4.2.5 兼容:iPhone/Ipod touch >=3.1.1, i ...
- 【IScroll深入学习】突破移动端黑暗的利器(上)
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
- 滚动条美化实践(原生js,iscroll,nicescroll)
近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏 ...
- jquery——移动端滚动条插件iScroll.js
官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...
- iscroll 加载不全解决方案
例如上图中,get_kaijiang 中如果执行一段ajax跨域传输的话 function get_kaijiang(){ ajax------- $('#div').append(html); -- ...
随机推荐
- selenium结合最新版的sikuli使用
sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...
- lua解析脚本过程中的关键数据结构介绍
在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...
- 推荐12个漂亮的 CSS3 按钮实现方案
在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...
- java使用Executor(执行器)管理线程
一.一个实现了Runnable接口的类 class MyThread implements Runnable{ private static int num = 0; @Override public ...
- 【原创】开源.NET排列组合组件KwCombinatorics使用(一)—组合生成
本博客所有文章分类的总目录:本博客博文总目录-实时更新 本博客其他.NET开源项目文章目录:[目录]本博客其他.NET开源项目文章目录 KwCombinatorics组件文章目录: 1. ...
- EntityFramework之一对一关系(二)
前言 关于表关系园中文章也是数不胜收,但是个人觉得最难攻克的是一对一,对其配置并非无道理可循,只要掌握了原理方可,且听我娓娓道来! 共享主键关系 概念:就是两个表共享相同的主键值,也就是说一表的主键值 ...
- EntityFramework 如何进行异步化(关键词:async·await·SaveChangesAsync·ToListAsync)
应用程序为什么要异步化?关于这个原因就不多说了,至于现有项目中代码异步化改进,可以参考:实际案例:在现有代码中通过async/await实现并行 这篇博文内容针对的是,EntityFramework ...
- 小菜学习设计模式(四)—原型(Prototype)模式
前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...
- [翻译]利用顶点位移的VR畸变校正
文章英文原网址: http://www.gamasutra.com/blogs/BrianKehrer/20160125/264161/VR_Distortion_Correction_using_V ...
- 数据库操作提示:Specified key was too long; max key length is 767 bytes
操作重现: 法1:新建连接——>新建数据库——>右键数据库导入脚本——>提示:Specified key was too long; max key length is 767 by ...