`
qbaty
  • 浏览: 96936 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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  
我使用页滚动模式,默认滚页的控制太敏感了,请问下我怎么样才能控制手指滑动长点的距离才会触发滚页。谢谢

相关推荐

    iScroll-5中文文档

    iScroll的版本中包含了不同功能的分支,开发者可以根据实际需求选择合适的版本: - iScroll.js:这是功能较全的标准版本,包含了多数常用功能,适合多数场景。 - iScroll-lite.js:这个精简版本去掉了如快速跳跃、...

    iScroll 4.2.5 中文API

    iScroll的诞生源于早期移动浏览器(包括iOS和Android)中缺乏有效的滚动解决方案。为了模拟原生应用中的滚动体验,开发者通常需要借助额外的技术手段。幸运的是,移动WebKit提供了硬件加速的CSS属性,这让iScroll...

    iscroll4

    iscroll4是iscroll的一个早期版本,虽然可能没有最新版的功能丰富,但依然在许多项目中被广泛使用。 iscroll4的核心特性包括: 1. **高性能滚动**:iscroll4通过高效的事件处理和动画更新,确保在各种设备上的滚动...

    iscroll.js下载 5.1.3最新版本

    3. **iscroll-probe.js**(如果包含):这个版本的iscroll提供了实时的scroll事件,适合需要在滚动过程中实时更新数据或视觉效果的应用。 4. **iscroll-infinite.js**(如果包含):提供了无限滚动的功能,当用户...

    移动开发iscroll5.2.0 API中文说明.chm

    iscroll最新版中文说明,为了更方便查看iscroll5.2.0版本说明,专门制作了 iscroll5.2.0 API中文说明.chm版,方便各大移动开发爱好了更好的、更方便查看iscroll5.2.0 API。

    iscroll5上拉下拉实例完整demo

    2. **配置iscroll对象**:在JavaScript中,我们需要创建一个iscroll实例,传入相应的配置参数,如容器元素的选择器、滚动方向、是否启用滚动条等。例如: ```javascript var myScroll = new IScroll('#wrapper', {...

    IScroll5API中文文档,word版

    ### IScroll5 API中文文档概览 #### 一、引言 IScroll5是一款非常流行的JavaScript库,专门用于实现平滑滚动效果。该库适用于多种设备,包括移动设备和桌面浏览器,提供了丰富的配置选项和扩展功能,使得开发者可以...

    iscroll所用到的js文件

    iscroll库适用于那些需要精确控制滚动行为的场景,比如在网页应用中实现与原生应用类似的滚动体验。 **iscroll.js** iscroll的基础版本,包含了核心的滚动功能。它提供了基本的滚动事件监听、滚动动画以及滚动范围...

    html iscroll demo.rar

    3. **初始化iscroll**:在JavaScript中,使用`new IScroll`来创建一个iscroll实例。你需要传入两个参数,第一个是滚动容器的选择器,第二个是一个配置对象,可以设置滚动方向、是否启用鼠标滚轮等选项。 ```...

    iscroll demo

    **iscroll 演示项目详解** iscroll 是一个轻量级、高性能的JavaScript滚动库,主要用于处理触摸...通过学习和实践`iscroll demo`,开发者能够掌握iscroll的使用,提升网页滚动体验,为用户提供更加流畅、自然的交互。

    iscroll5 滑动 滚动

    在iscroll5中,开发者可以实现自定义滚动条、无限滚动、触摸滑动等多种功能,极大地优化了用户的交互体验。 **一、iscroll5的核心特性** 1. **高性能滚动**:iscroll5采用了硬件加速技术,通过CSS3属性如`...

    iscroll.js 用法demo

    **iscroll.js 用法详解** ...通过实践和研究`iscroll-demo`中的示例,你可以掌握`iscroll.js`的核心用法,从而在自己的项目中实现更优质的滚动体验。记得根据项目需求选择合适的配置和优化策略,以达到最佳效果。

    iscroll框架

    **iscroll框架详解** iscroll是一款轻量级的JavaScript库,专为移动设备设计,用于实现高效率的触摸滚动效果。它支持水平和垂直滚动,同时...通过深入理解和实践,开发者可以利用iscroll构建出更优秀的移动Web应用。

    jquery iscroll下拉插件

    3. **初始化iScroll**:在JavaScript中,使用jQuery选择器找到对应的元素,然后初始化iScroll,同时启用下拉刷新功能: ```javascript var myScroll = new IScroll('#wrapper', { mouseWheel: true, ...

    iscroll4.js

    《iscroll4.js在HTML5页面中的应用及上拉刷新、下拉加载功能实现》 iscroll4.js是一款轻量级的JavaScript库,专为HTML5页面设计,用于...通过不断学习和实践,可以更好地利用iscroll4.js提升Web应用的性能和交互性。

    滚动分页,iscroll

    在本篇文章中,我们将深入探讨如何使用iscroll插件来实现滚动分页。 iscroll是一款轻量级、高性能的JavaScript库,由Matteo Spinelli开发,主要用于处理触摸滚动和滚动事件。它支持各种设备和浏览器,包括桌面、...

    iscroll分页滚动(加回到顶部)

    在这个“iscroll分页滚动(加回到顶部)”的示例中,我们将探讨如何利用iscroll实现分页滚动,并添加“回到顶部”的功能以及页面底部显示当前页数与总页数的提示。 首先,iscroll的核心在于它能够处理复杂的滚动...

    iscroll组件

    在`cubiq-iscroll-f676436`这个压缩包中,可能包含了iscroll的源码、示例、文档等资源,帮助开发者更深入地理解和使用iscroll。 在实际项目中,iscroll可以配合其他前端框架,如Vue、React或Angular等,通过适配器...

    iscroll.js

    iscroll.js

    iscroll5 不改动官方源码下拉刷新

    总的来说,这个项目展示了如何利用iscroll5的API和CSS3特性,以不侵入iscroll5源码的方式实现下拉刷新,这对于希望保持库原貌的开发者来说是一种很好的实践。通过这种方式,不仅可以轻松地集成到现有项目中,还确保...

Global site tag (gtag.js) - Google Analytics