iScroll相关
iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。
iScroll的最新版本是2011.07.03发布的4.1.7版。最新版比以往更顺畅,添加了更多的自定义事件,提供了更高级的可编程性。
使用方法:
DOM结构应尽量保持简洁,避免过多的嵌套。滚动区域为第一个子元素。html代码:
<div id="wrapper">
<ul>
<li></li>
...
...
</ul>
</div>
<script type="text/javascript">
/* var myScroll = new IScroll('#wrapper');
var wrapper = document.getElementById('wrapper');
var myScroll = new IScroll(wrapper);
var myScroll = new IScroll('.wrapper');*/
</script>
上面的DOM结构中,ul将是滚动的区域。如果想同时滚动多个区域就要用一个容器把需要滚动的区域包起来。
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
...
</ul>
<ul>
<li></li>
...
...
</ul>
</div>
</div>
上面的DOM结构中,两个UL会同时滚动。
插件的调用需要在页面完全加载之后。你可以通过以下3种方法来实现。
- 设置onDOMContentLoaded事件
- 设置onLoad事件
- 把调用代码放到页面的最后。
使用onDOMContentLoaded事件实现滚动
如果滚动区域的长宽是固定的,就可以通过onDOMContentLoaded事件来实现滚动。
<script>
var myscroll;
function loaded() {
myscroll = new iScroll("wrapper");
}
window.addEventListener("DOMContentLoaded", loaded, false);
</script>
注意:myscroll这个变量是全局的,因此你可以在任何地方调用它.
使用onLoad事件实现滚动
因为DOMContentLoaded事件是载入DOM结构后就会被调用,所以在图片等元素未载入前可能无法确定滚动区域的长宽,此时可以使用onLoad事件来实现。
<script src="iscroll.js">
var myscroll;
function loaded() {
setTimeout(function() {
myscroll = new iScroll("wrapper");
},100);
}
window.addEventListener("load", loaded, false);
</script>
这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的方式。如果这个时间后还有元素未完全载入导致无法计算滚动区域长宽,可能会导致错误。但这是目前最好的方法了。
把调用的代码放到最后(inline初始化)
很多javascript大师推荐用这种方法来实现一些需要先加载DOM的特效。因此,在此也可以使用这个方法。但插件开发者似乎并不推荐。因为有可能会出现执行javascript之前没有完全载入页面元素,比如图片。
<div id="wrapper">
<ul>
<li></li>
...
</ul>
</div>
<script>
var myscroll = new iScroll("wrapper");
</script>
不过建议你使用一些框架的ready方法来安全调用iScroll(比如jquery里的ready())。
ISCROLL参数设置
在实例化的时候可以通过传递第二个参数来设置一些效果。
<script>
var myscroll = new iScroll("wrapper", {
hScrollbar: false,
vScrollbar: false
});
</script>
第二个参数通常都是一个对象,像上面的这个例子里就设定了不显示滚动条。常用的参数如下:
hScroll false 禁止横向滚动 true横向滚动 默认为true
vScroll false 精致垂直滚动 true垂直滚动 默认为true
hScrollbar false隐藏水平方向上的滚动条
vScrollbar false 隐藏垂直方向上的滚动条
fixedScrollbar 在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出
scroller的可见区域。默认在Android上为true, iOS上为false
fadeScrollbar false 指定在无渐隐效果时隐藏滚动条
hideScrollbar 在没有用户交互时隐藏滚动条 默认为true
bounce 启用或禁用边界的反弹,默认为true
momentum 启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用
lockDirection false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)
各种效果的实现
滚动刷新http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
自从Twitter和一些Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行。你可以看看这儿先一睹为快。
最新版中,作者把把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容,不过一旦DOM树发生了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然,如果你不想使用这个延迟,那就把setTimeout方法去掉就行了。
缩放(pinch / zoom)http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放大和缩小。想要这个功能,只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能,你至少需要如下配置:
var myScroll =new iScroll("wrapper",{zoom:true});
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项:
zoomMax 指定允许放大的最大倍数,默认为4
【注意事项】:如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说,就是在所有需要缩放的img元素上使用-webkit-transform:translate3d(0,0,0)来实现,而且尤为重要的是,硬件的加速会占用大量资源,要谨慎使用,否则你的应用可能就此崩溃。
捕捉元素(snap and snap to element) http://cubiq.org/dropbox/iscroll4/examples/carousel/
SNAP功能是判断元素是否滑动到指定位置。通过这个效果可以制作花哨的跑马灯效果。
插件会自动分析滚动区域内相同标签或相同大小的元素做为捕捉对象,也可以通过参数指定捕捉的对象
var myscroll = new iScroll("wrapper", {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false
});
可以通过设置snap参数为指定标签来设定捕捉对象。比如捕捉li标签。
var myscroll = new iScroll("wrapper", {
snap: "li",
momentum: false,
hScrollbar: false,
vScrollbar: false
});
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素
自定义滚动条(custom scrollbars)
在iScroll 4这个版本中,可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数,如下:
var myscroll=new iScroll("wrapper",{
scrollbarClass: "myScrollbar"
});
需要提醒的是,滚动条是由两个元素组合而成的:容器和显示器。容器同wrapper的高度相同,而显示器则代表的是滚动条本身。
滚动条的HTML结构如下:
<div class="myScrollbarV">
<div></div>
</div>
<style type="text/css">
.myscrollbarV {
position: absolute;
z-index: 100;
width: 8px;
bottom: 7px;
top: 2px;
right: 1px;
} .myScrollbarV > div {
position: absolute;
z-index: 100;
width: 100%;
/* The following is probably what you want to customize */
background: -webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
border: 1px solid #800;
-webkit-background-clip: padding-box;
-webkit-box-sizing: border-box;
-webkit-border-radius: 4px;
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}
</style>
通用方法:
(1)refresh 在DOM树发生变化时,应该调用此方法
eg: setTimeout(function () { myScroll.refresh(); }, 0);
(2)iScroll还提供了scrollTo, scrollToElement和scrollToPage三个方法让你能够通过javascript来控制滚动效果。
scrollTo(x, y, time, relative):在指定的time时间内让内容滚动条x/y的位置。如myScroll.scrollTo(0, -100, 200) 在200毫秒内Y轴向下滚动100像素。 myScroll.scrollTo(0, 10, 200, true)可以实现相对当前位置在200毫秒内Y轴向上滚动10像素的效果。
scrollToElement(element, time):在指定的时间内滚动到指定的元素。如myScroll.scrollToElement('li:nth-child(10)', 100) 在100毫秒内滚动到第10个li元素的位置。第1个参数可以用CSS3中的选择器来筛选元素。
snapToPage(pageX, pageY, time):在200毫秒内从第1页滚动到第2页(0代表第1页,1代表第2页)。这个使用SNAP功能的时候可以调用这个函数。
(3)detroy() 完全消除myscroll及其占用的内存空间
eg: myscroll.destroy();
myScroll = null;
iScroll的发展方向
- 表单域的支持
- 缩放的优化
- 更好的桌面浏览器的兼容性
- onScrol事件的优化
- 加个哈希值的变化
- DOM改变后自动刷新
iscroll官网:http://iscrolljs.com/
iScroll相关的更多相关文章
- 嵌入式单片机STM32应用技术(课本)
目录SAIU R20 1 6 第1页第1 章. 初识STM32..................................................................... ...
- 【IScroll深入学习】解决IScroll疑难杂症
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
- iscroll总结
iScroll基本信息 官网:http://cubiq.org/iscroll-4 更新:2012.07.14 版本:v4.2.5 兼容:iPhone/Ipod touch >=3.1.1, i ...
- iscroll
在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版 ...
- 【IScroll深入学习】突破移动端黑暗的利器(上)
前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...
- 【单页应用】view与model相关梳理
前情回顾 根据之前的学习,我们形成了一个view与一个messageCenterview这块来说又内建了一套mvc的东西,我们这里来理一下首先View一层由三部分组成:① view② dataAdpt ...
- 滚动条美化实践(原生js,iscroll,nicescroll)
近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏 ...
- Iscroll解析
做了一些移动端的产品,发现一些滚动效果很多会使用 iscroll 作为底层库(如阿里小蜜).iscroll 的文档已经好久没更新了,而且比较简单,经常需要直接读源码.这里写一篇总结,作为对 iscro ...
- 【iScroll源码学习04】分离IScroll核心
前言 最近几天我们前前后后基本将iScroll源码学的七七八八了,文章中未涉及的各位就要自己去看了 1. [iScroll源码学习03]iScroll事件机制与滚动条的实现 2. [iScroll源码 ...
随机推荐
- Xshell远程连接Linux时无法使用小键盘的解决方式
我在用xshell连接远程的centos时,每次使用vi/vim的时候而NumLock明明在开启着,小键盘都不能正确输入数字,其实这是时按小而是出现一个字母然后换行(实际上是命令模式上对应上下左右的键 ...
- WSUS目录本地迁移
生产环境中有一台win2003 server,安装了Microsoft Windows Server Update Services 3.0,作为所有windows server的内网补丁更新服务器, ...
- override 修饰符
override(C# 参考) 要扩展或修改继承的方法.属性.索引器或事件的抽象实现或虚实现,必须使用 override 修饰符. C# abstract class ShapesClass { ab ...
- 黄聪:百度知道中对HTML字符实体、字符编号,&开头字符的使用
http://www.w3school.com.cn/tags/html_ref_entities.html 带有实体名称的 ASCII 实体 结果 描述 实体名称 实体编号 " quota ...
- yarn的调度策略
一. yarn的资源分配模型 无论先进先出调度器,容量调度器,还是公平调度器,他们的核心:资源分配模型是一样的. 调度器维护着多个队列的信息,用户可以向任意一个或多个队列提交job.每次NodeMan ...
- My to do 12.25
Merry Christmas 新的一年要来了,参加工作转眼也快半年了.回顾以往,多逢贵人.不忘初心,感慨良多.祝所有的朋友都能幸福,愿望都可以实现,日子越过越好~ Look Back 作为GH加入北 ...
- ADF_ADF Faces系列6_ADF数据可视化组件简介之建立Thematic Map Component
2013-05-01 Created By BaoXinjian
- dede各种运用[转]
文章正文页常用函数: 1.相应文章上下文调用: {dede:prenext function="str_replace(' 下一篇:','<'.'br'.' />下一篇: 2.文 ...
- http 303 307 302 状态码理解
最近在看 <<the rails4 way>> 书中提到了这几个状态码,网上搜到几篇文章 http://www.cnblogs.com/cswuyg/p/3871976.htm ...
- Microsoft visual studio中文字样输出
解决办法: 可以尝试下通过: 1.file->高级保存选项-> 2.工具->选项->文本编辑器->自动检测不带签名的UTF-8编码