没有合适的资源?快使用搜索试试~ 我知道了~
iScroll5中文API,iscroll5PDF文档带目录书签,iscroll5帮助文档
5星 · 超过95%的资源 需积分: 45 213 下载量 173 浏览量
2014-12-30
14:42:31
上传
评论 9
收藏 304KB PDF 举报
温馨提示
试读
27页
iScroll5中文API,iscroll5PDF文档带目录书签,iscroll5帮助文档;最近项目上需要使用iScroll,在中文圈里找了找,只找到了iScroll 4的中文版API。于是先挑一个简单点儿的,把iScroll 5的API翻译一下,方便中文用户使用。
资源推荐
资源详情
资源评论
1.
版本
前言
最近项目上需要使用
iScroll
,在中文圈里找了找,只找到了
iScroll 4
的中文版
API。加上最近开始使用 github(准确说,github 账号是很多年前注册的,一直
在企业应用里摸爬滚打,荒废了账号很长时间,是理由吗?是理由吗?),出于
对开源社区的敬意,我突然觉得应该做点啥,于是先挑一个简单点儿的,把
iScroll
5 的 API 翻译一下,方便中文用户使用。
搭后语
iScroll 对于我来讲典型的应用场景位于移动设备的 App,基于
Cordova/Phonegap + JQM + iScroll
开发移动设备上的
App
,对于以数据呈
现为主体的企业应用来讲无疑是一个多快好省的解决方案。这三驾马车前两个可
以堂而皇之的称之为
开发框架
,
iScroll
只能称之为工具,尽管如此,
iScroll
带来
的强大的滚动功能,能节省我们在项目开发上的部分时间(这也是开源社区的力
量),所以也值得我花时间理解作者的代码和文档。如果您认同这种功劳苦劳,
请到
github
上给我一个
star
。由于才疏学浅,在翻译过程中难免会有错误或者
瑕疵,请在
issure
中提出,我会及时更正。
下面,我们开始 iScroll 之旅,请系好安全带。
iScroll 简介
iScroll
是一个高性能,资源占用少,无依赖,多平台的
javascript
滚动插件。
它可以在桌面,移动设备和智能电视平台上工作。它一直在大力优化性能和文件
大小以便在新旧设备上提供最顺畅的体验。
iScroll 不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你
的项目中包含仅仅
4kb
大小的
iScroll
,你的项目便拥有了滚动,缩放,平移,
无限滚动,视差滚动,旋转功能。给它一个扫帚它甚至能帮你打扫办公室。
即使平台本身提供的滚动已经很不错,iScroll 可以在此基础上提供更多不可思议
的功能。具体来说:
细粒度控制滚动位置,甚至在滚动过程中。你总是可以获取和设置滚动器
的 x,y 坐标。
动画可以使用用户自定义的擦出功能(反弹'bounce',弹性'elastic',回
退'back',...)。
你可以很容易的挂靠大量的自定义事件(onBeforeScrollStart, *
开箱即用的多平台支持。从很老的安卓设备到最新的
iPhone
,从
Chrome
浏览器到 IE 浏览器。
2.入门
你想成为
iScroll
大师。行,这就是我写以下内容的目的。
最好的学习
iScroll
的方法是看示例。在存档文件中你会发现一个叫做
demo
的文
件夹示例。这里有大多数脚本功能的概述。
IScroll 是一个类,每个需要使用滚动功能的区域均要进行初始化。每个页面上
的
iScroll
实例数目在设备的
CPU
和内存能承受的范围内是没有限制的。
尽可能保持
DOM
结构的简洁。
iScroll
使用硬件合成层但是有一个限制硬件可以
处理的元素。
最佳的 HTML 结构如下:
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul></div>
iScroll
作用于滚动区域的外层。在上面的例子中,
UL
元素能进行滚动。只有容
器元素的第一个子元素能进行滚动,其他子元素完全被忽略。
box-shadow, opacity, text-shadow and alpha channels are all properties that
don't go very well together with hardware acceleration. Scrolling might look
good with few elements but as soon as your DOM becomes more complex
you'll start experiencing lag and jerkiness.
Sometimes a background image to simulate the shadow performs better
than box-shadow. The bottom line is: experiment with CSS properties, you'll
be surprised by the difference in performance a small CSS change can
do.
最基本的脚本初始化的方式如下:
<script type="text/javascript">var myScroll = new
IScroll('#wrapper');</script>
第一个参数可以是滚动容器元素的 DOM 选择器字符串,也可以是滚动容器元素
的引用对象。下面是一个有效的语法:
var wrapper = document.getElementById('wrapper');var myScroll = new
IScroll(wrapper);
所以基本上你要么直接传递元素,要么传递一个
querySelector
字符串。因此可
以使用 css 名称代替 ID 去选择一个滚动器容器,如下:
var myScroll = new IScroll('.wrapper');
注意,
iScroll
使用的是
querySelector
而不是
querySelectorAll
,所以
iScroll
只会作用到选择器选中元素的第一个。如果你需要对多个对象使用 iScroll,你需
要构建自己的循环机制。
You don't strictly need to assign the instance to a variable (myScroll), but
it is handy to keep a reference to the iScroll.
For example you could later check the scroller position or unload unnecessary
events when you don't need the iScroll anymore.
3.初始化
当
DOM
准备完成后
iScroll
需要被初始化。最保险的方式是在
window
的
onload
事件中启动它。在 DOMContentLoaded 事件中或者 inline initialization 中做也可以,
需要记住的是脚本需要知道滚动区域的高度和宽度。如果你有一些图片在滚动区
域导致不能立马获取区域的高度和宽度,iScroll 的滚动尺寸有可能会错误。
为滚动起容器增加
position:relative
或者
absolute
样式。这将解决大多数滚动
器容器大小计算不正确的问题。
综上所述,最小的 iScroll 配置如下:
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
...
<body onload="loaded()">
<div id="wrapper">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</body>
转到
barebone example
获取更多关于最小化
CSS/HTML
结构的需求。
如果你有一个复杂的 DOM 结构,最好在 onload 事件之后适当的延迟,再去初
始化 iScroll。最好给浏览器 100 或者 200 毫秒的间隙再去初始化 iScroll。
4.配置 iScroll
在 iScroll 初始化阶段可以通过构造函数的第二个参数配置它。
var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});
上面的例子示例了在 iScroll 初始化时开启鼠标滚轮支持和滚动条支持。
在初始化后你可以通过
options
对象访问标准化值。例如:
console.dir(myScroll.options);
上面的语句将返回
myScroll
实例的配置信息。所谓的标准化意味着如果你设置
useTransform:true,但是浏览器并不支持 CSS transforms,那么 useTransform
属性值将为 false。
5.理解核心
iScroll
使用基于设备和浏览器性能的各种技术来进行滚动。通常不需要你来配置
引擎,iScroll 会为你选择最佳的方式。
尽管如此,理解 iScroll 工作机制和了解如何去配置他们也是很重要的。
options.useTransform(css 属性 boolean )
默认情况下引擎会使用 CSStransform 属性。如果现在还是 2007 年,那么可以
设置这个属性为 false,这就是说:引擎将使用 top/left 属性来进行滚动。
这个属性在滚动器感知到 Flash,iframe 或者视频插件内容时会有用,但是需要
注意:性能会有极大的损耗。
默认值:true
options.
useTransition(css 间补动画 boolean )
iScroll 使用 CSS transition 来实现动画效果(动量和弹力)。如果设置为 false,
那么将使用 requestAnimationFrame 代替。
剩余26页未读,继续阅读
kongjiea
- 粉丝: 579
- 资源: 30
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
前往页