资源描述:
《iScroll框架解析》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、·iScroll框架解析概要iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,Android这些系统上广泛使用)提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是,这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。然而,Android系统最新修订版已经可以支持这种功能了(尽管支持的力度还不是特别好),Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。除了以前
2、版本的iScroll的特性以外,iScroll 4还包括如下的特性: (1)缩放(Pinch/Zoom) (2)拉动刷新(Pull up/down to refresh) (3)速度和性能提升 (4)精确捕捉元素 (5)自定义滚动条 友情提示:iScroll 4并不是iScroll 3的简易替代版本,API文档已经不一样了。同时考虑到此版本正处于测试期,一些API 可能会有细微的变化。使用指南在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档,可能有点小无聊,但是这篇文章中却是iSc
3、roll这个脚本库的精髓之所在哦。iScroll需要对所要进行滚动的元素进行初始化,并且不限定一个页面中使用iScroll的元素的个数(这里不考虑您的硬件配置)。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。最优的使用iScroll的结构如下所示:
在
4、这个小例子中,ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。【注意事项】:只有wrapper里的第一个子元素才可以滚动,如果你想要更多的元素可以滚动,那么你可以试试下面的这种写法:
在这个例子中,scroller这个元素可以滚动,即便它包含两个ul元素iScroll必须在调用之前实例化,你可以在下面几种情况下对iScroll进行实例化: (1)onDOMContentLoaded (2)onLoad (3)以内联inline方式下面我们逐个来讲讲这三种用法的优缺点ONDOMContentLoaded 适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸
6、 使用方法:(在head标签中添加如下代码) 注意:myscroll这个变量是全局的,因此你可以在任何地方调用它的函数onLoad 有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的,因此此时页面的资源可能还没有全部加载完毕。如果你遇到了一些很怪异的行为可以试试下面的写法: