IScroll 实践指南(中)

上一篇主要是描述iscroll 初始化的参数，以及如何开始初始化一个iscroll实例。
那么这篇文章是来描述如何使用 iscroll 提供的API，以及一些没有提供的功能，如何通过参数来控制iscroll
Iscroll 提供的调用方法有：

• destroy
• refresh
• scrollTo
• scrollToElement
• scrollToPage
• disable
• enable
• stop
• zoom
• isReady

destroy
顾名思义，是用来销毁你实例化的iScroll 实例，包括之前绑定的所有iscroll 事件。

refresh
这个方法非常有用，当你的滚动区域的内容发生改变 或是 滚动区域不正确，都用通过调用refresh 来使得iscroll 重新计算滚动的区域，包括滚动条，来使得iscroll 适合当前的dom。

scrollTo
这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标，y为移动的y轴坐标, time为移动时间，relative表示是否相对当前位置。

scrollToElement
这个方法实际上是对scrollTo的进一步封装，接受两个参数(el,time)，el为需要滚动到的元素引用，time为滚动时间。

scrollToPage
此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时，iscroll 会自动分页，然后就能使用scrollToPage方法滚动到页面。当然，当hscroll 为false 的时候，不能左右滚动。pageX这个参数就失去效果

disable
调用这个方法会立即停止动画滚动，并且把滚动位置还原成0，取消绑定touchmove, touchend、touchcancel事件。

enable
调用这个方法，使得iscroll恢复默认正常状态

stop
立即停止动画

zoom
改变内容的大小倍数,此方法接受4个参数，x,y,scale,time 分别表示的意思为，放大的基准坐标，以及放大倍数，动画时间

isReady
当iscroll 没有处于正在滚动，没有移动过，没有改变大小时，此值为true

上一篇没有谈到snap 这个属性，而这个属性往往是需要用iscroll作滚动组件非常关键的一个属性。还记得我们的iphone 菜单滚动效果吧？当手指触摸屏幕向左拉动到一半的情况，应用菜单会自动滚动对齐到下一页。这个snap 属性就是用来实现这种效果的。

<script type="text/javascript">
var myScroll;

function loaded() {
	myScroll = new iScroll('wrapper', {
		snap: 'li',
		momentum: false,
		hScrollbar: false,
		vScrollbar: false
	 });
}

document.addEventListener('DOMContentLoaded', loaded, false);
</script>

以上是官方例子的代码，展示了iscroll 滑动对齐到元素li。

snap值可以为true 或是 DOM元素的tagname，当为true 时，对齐的坐标会根据可滚动的位置和滚动区域计算得到可滑动几页。如果为tagname,则滑动会对齐到元素上。举个例子\
假设有这样一个列表，每个li 里的img 都为居中显示，maxWidth 都等于屏幕宽度，li的宽度都为屏幕的宽度，那么上面的代码就可以实现一个滚动图片组件了

<ul>
<li>
   <img src="img.jpg"/>
<li>
<li>
   <img src="img.jpg"/>
<li>
<li>
   <img src="img.jpg"/>
<li>
<li>
   <img src="img.jpg"/>
<li>
</ul>

总结： 我们看到iscroll 的所有的属性和 api 都旨在做一件事情，就是在固定区域内滚动。当然通过snap，我们可以很好的模拟iphone 菜单间的平滑滚动。下一节将用实际的例子来示范如何做一个iphone方式的平滑滚动。

转载请注明原文出处 http://qbaty.iteye.com/blog/1354380

评论

5 楼 qbaty 2012-11-09  

xiaoxiehang 写道

lhi007 写道

我使用页滚动模式，默认滚页的控制太敏感了，请问下我怎么样才能控制手指滑动长点的距离才会触发滚页。谢谢

同求

遗憾的是，iscroll 对这个并没有暴露出友好的接口，只能通过修改源码来实现：
_snap 这个私有方法控制着页面的计算，分X轴和Y轴，目前只通过方向和大小判断

4 楼 xiaoxiehang 2012-09-20  

lhi007 写道

我使用页滚动模式，默认滚页的控制太敏感了，请问下我怎么样才能控制手指滑动长点的距离才会触发滚页。谢谢

同求

3 楼 davidblues 2012-04-29  

IScroll 实践指南(下)
啥时候出来啊，呵呵期待ing 

2 楼 yumi033 2012-02-16  

尝试使用iScroll实现无缝的滚动，每次滚动结束 将滚动方向的第一个li添加到尾端，但是效果不顺畅，请问怎样能实现喃？？谢谢哈

1 楼 lhi007 2012-02-06  

我使用页滚动模式，默认滚页的控制太敏感了，请问下我怎么样才能控制手指滑动长点的距离才会触发滚页。谢谢