移动设备web开发插件iScroll的使用详解

移动设备web开发插件iScroll的使用详解
2012-03-01 由 admin
iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。

iScroll的最新版本是2011.07.03发布的4.1.7版。最新版比以往更顺畅，添加了更多的自定义事件，提供了更高级的可编程性。

使用方法：
DOM结构应尽量保持简洁，避免过多的嵌套。滚动区域为第一个子元素。html代码：



•
...
...


上面的DOM结构中，ul将是滚动的区域。如果想同时滚动多个区域就要用一个容器把需要滚动的区域包起来。




•
...
...


•
...
...



上面的DOM结构中，两个UL会同时滚动。

插件的调用需要在页面完全加载之后。你可以通过以下3种方法来实现。

•设置onDOMContentLoaded事件
•设置onLoad事件
•把调用代码放到页面的最后。
使用onDOMContentLoaded事件实现滚动
如果滚动区域的长宽是固定的，就可以通过onDOMContentLoaded事件来实现滚动。



注意：变量myScroll是全局的，可以在任何时候调用插件。

使用onLoad事件实现滚动
因为DOMContentLoaded事件是载入DOM结构后就会被调用，所以在图片等元素未载入前可能无法确定滚动区域的长宽，此时可以使用onLoad事件来实现。



如上代码，在页面加载完100毫秒后调用插件。如果这个时间后还有元素未完全载入导致无法计算滚动区域长宽，可能会导致错误。但这是目前最好的方法了。

把调用的代码放到最后


•
...
...



很多javascript大师推荐用这种方法来实现一些需要先加载DOM的特效。因此，在此也可以使用这个方法。但插件开发者似乎并不推荐。因为有可能会出现执行javascript之前没有完全载入页面元素，比如图片。

ISCROLL参数设置
在实例化的时候可以通过传递第二个参数来设置一些效果。


第2个参数是以对象的形式传递的。如上代码中为效果为隐藏滚动条。参数如下：

•hScroll：无论内容是否超出显示区域，都禁用水平方向的滚动条。默认情况下是水平和垂直方向同时出现的。
•vScroll：禁用垂直方向的滚动条。
•hScrollbar：隐藏水平方向的滚动条。
•vScrollbar：隐藏垂直方向的滚动条。
•fixedScrollbar：在IOS中拖动滚动条的时候可能会使内容（或滚动条，）缩小，设置该参数为true可防止该现象。同样适用于Android。Android默认为true，IOS默认为FALSE。
•hideScrollbar：在用户没有操作的时候是否隐藏滚动条。默认为false
•fadeScrollbar：设置滚动条的谈入谈出效果。在hideScrollbar为true的时候有效
•bounce：设置滚动条边界的时候是否有反弹效果，默认为true。
•momentum：设置是否开始惯性，关闭此效果可节省资源
•lockDirection：保持只在两个方向上或滚动（上/下或左/右），在翻屏的时候可使用。不过我在Android上测试的时候似乎没效果，不知道是我测试方法错了还是怎么回事。


各种效果的实现
滚动刷新

'Pull to refresh' demo
这个效果已经应用在Twitter app上和许多苹果应用上使用。

最新版中，作者把滚动刷新和代码复制的功能写成了一个外部插件，可查看DEMO看它是如何工作的。

只需要定义一个pullDownAction()函数，通过ajax来调取数据，然后用refresh方法刷新DOM。请注意增加1秒的延迟来模拟网络阻塞。


放大/缩小

'Zoom' example
通过这个插件，还可以实现滚动区域两指缩放的效果。也可以通过双击来实现缩放。

在第二个参数加添加zoom参数为true就可以实现，通过对zoomMax参数还可以控制缩放的倍数，最大值为4倍

var myScroll = new iScroll('wrapper', { zoom: true,zoomMax:4});
这个效果是通过硬件加速或使用webkit内核的 -webkit-transform:translate3d(0,0,0)的动画CSS3属性来实现。

注意：硬件加速需要消耗大量的资源，有可能会使系统崩溃。


SNAP和SNAP元素

'Carousel' demo
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 });在snap属性的值为指定标签的时候，插件会通过 scroller.querySelectorAll(snap_string)的方法来获取对象。所以要注意不要写成"$scroller li"，这是错误的。只要写'li'。


自定义滚动条

'Custom scrollbars' demo
iScroll插件允许你自定义滚动条的样式。可以通过css定义一个class，并通过scrollbarClass属性把class的名称传递给iScroll就可以了。

myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' })
滚动条的DOM结构是一个class名为myScrollBarV的外容器和一个指标组成。可以通过改变这两个元素的样式来自定义滚动条。




.myScrollbarV {
position:absolute;
z-index:100;
width:8px;bottom:7px;top:2px;right:1px
}

.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
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);
}内部方法
iScroll还提供了一些公共方法。比如说refresh。在改变滚动区域里内容的时候都必须调用refresh方法。因为iScroll是通过实例化一个全局变量来实现的，所以使用者可在任何情况下调用这些方法。

调用方法： myScroll.name_of_the_function(参数)

refresh方法
iScroll需要知道滚动区域的大小和滚动条才能正常工作。在实例化的时候iScroll会自动计算一次。但如果滚动区域里的内容发生变化后，需要告诉iScroll内容发生了变化。

每次改变元素的高度/宽度或以任何方式修改（如： appendChild或innerHTML的）HTML结构时，浏览器会重新渲染页面。javascript就需要重新分析新的DOM结构和新的属性，有时候，这个不是即时的。

为了确保javascript分析新的页面，可以实例化一个新的iScroll。

ajax('page.php', onCompletion);
function onCompletion () {
setTimeout(function () {
myScroll.refresh();
}, 0);
};JAVASCRIPT SCROLLING
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功能的时候可以调用这个函数。

注销iScroll
通过调用destroy()函数下注销iScroll来释放内存。

myScroll.destroy(); myScroll = null;
LITE版iScroll
如果你只希望在移动设备中使用iScroll，请使用iscroll-lite.js

LITE版是一个精简版，它支持移动设备（没有桌面兼容性）滚动。所占的资源更少。

iScroll的发展方向
•表单域的支持
•缩放的优化
•更好的桌面浏览器的兼容性
•onScrol事件的优化
•加个哈希值的变化
•DOM改变后自动刷新
译自：http://cubiq.org/iscroll-4

转自：移动设备web开发插件iScroll的使用详解