上一篇主要是描述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
分享到:
相关推荐
iscroll最新版中文说明,为了更方便查看iscroll5.2.0版本说明,专门制作了 iscroll5.2.0 API中文说明.chm版,方便各大移动开发爱好了更好的、更方便查看iscroll5.2.0 API。
iscroll4
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。它可以处理任何需要与用户进行移动交互的元素
iScroll 5下拉刷新。 iScroll 5 更新之后的pull-to-refresh的demo没了,无奈,google下一个国外程序员写的上下拉刷新,自己精简了下,只保留了下拉刷新。
包含iscroll.js、iscroll-infinite.js、iscroll-lite.js、iscroll-probe.js、iscroll-zoom.js
iscroll5上拉下拉实例完整demo,iscroll5刚出来的时候自己写的demo,本人已经改行无意间上来看了下,把积分调整低
在你的项目中包含仅仅4kb大小的iScroll,你的项目 便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能。给它一个扫帚它甚至能帮你打扫办公室。 即使平台本身提供的滚动已经很不错,iScroll可以在此基础上提供...
jquery iscroll下拉插件
iscroll.js
iScroll5中文API,iscroll5PDF文档带目录书签,iscroll5帮助文档;最近项目上需要使用iScroll,在中文圈里找了找,只找到了iScroll 4的中文版API。于是先挑一个简单点儿的,把iScroll 5的API翻译一下,方便中文用户...
iscroll5 滑动 滚动 最新资讯
各种关于iscroll的demo,中文api地址:http://www.gafish.net/api/iScroll.html
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的...
iScroll下拉刷新上滑加载; 使用经典插件iScroll4稍作封装,采用ajax请求数据,实现移动端列表页的功能; 1.下拉刷新当前列表页数据; 2.上滑加载更多列表数据; iScroll4简介: iScroll 4 这个版本完全重写了...
iScroll.js的用法 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android 这些系统上广泛使用) 提供了一种本地化的方式来对一...
原生 iscroll-4
iScroll是一种高性能,小体积,无依赖性,跨平台的JS滚动,下拉刷新插件,可以动态加载分页内容。它适用于台式机,手机和智能电视。它的性能和尺寸大力优化等提供的一致好评现代老设备的平滑效果。iScroll 5.1.1 ...
这个版本比较不错,纯中文,介绍的比较详细开发够用了,很不错的一个滚动条插件。
iscroll5用于移动端上拉刷新和下拉加载功能,iScroll5使用基于设备和浏览器性能的各种技术来进行滚动。不需要配置引擎,iScroll5会为你选择最佳的方式