iScroll5简要使用说明及实现下/上拉刷新页面
16 Jul 2015iScroll5 使用及常见页面结构实例
iScroll的版本
- iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。
- iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案。
- iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。（我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。
- iscroll-zoom.js，在标准滚动功能上增加缩放功能。
- iscroll-infinite.js，可以做无限缓存的滚动。处理很长的列表的元素为移动设备并非易事。 iScroll infinite版本使用缓存机制,允许你滚动一个潜在的无限数量的元素。
基本使用方法
基本HTML结构 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
</head>
<body>
<div id="wrapper">
<div id="scroller">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</body>
</html>
注意：有时候是按照iscroll 官方提供的结构来写可是还是无法实现滚动效果，尤其是页面结构比较复杂或者一个页面有多个滚动的iscroll，此时一般的问题原因是你的外层(div#wrapper)的定位方式不对，div#wrapper的定位要是position：absolute，遇到很多情况都是通过这种方式解决的，调整好布局是实现iscroll 关键。
基本js:
<script type="text/javascript" src="js/iscroll.js"></script>
<script>
var myScroll = new IScroll('#wrapper',{
/**配置修改**/
});
</script>
基本参数配置
在初始化后你可以通过options对象访问标准化值。例如：
var myScroll = new IScroll('#wrapper');
console.dir(myScroll.options);
相关常用参数配置表：
| 配置参数 | 值 | 参数说明 |
|---|---|---|
| bounce | 默认为true | 当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。 |
| click | 默认为false | iscroll 为了重写原生滚动条，iScroll禁止了一些默认的浏览器行为，比如鼠标的点击。如果你想你的应用程序响应click事件，那么该设置次属性为true。请注意，建议使用自定义的tap 事件来代替它（见下面:tap） |
| disableMouse disablePointer disableTouch |
默认为false | 设置为true时禁用鼠标/指针/触摸事件。 |
| eventPassthrough | 默认为false | 有些时候你想保留原生纵向的滚动条但想为横向滚动条增加iScroll功能（比如走马灯）。设置这个属性为true并且iScroll区域只将影响横向滚动，纵向滚动将滚动整个页面。注意，这个值也可以设置为’horizontal’，其作用和上面介绍的相反（横向滚动条保持原生，纵向滚动条使用iScroll）。 |
| freeScroll | 默认为false | 此属性针对于两个两个纬度的滚动条（当你需要横向和纵向滚动条）。通常情况下你开始滚动一个方向上的滚动条，另外一个方向上会被锁定不动。有些时候，你需要无约束的移动（横向和纵向可以同时响应），在这样的情况下此属性需要设置为true。 |
| keyBindings | 默认为false | 此属性为true时激活键盘（和远程控制）绑定。 |
| invertWheelDirection | 默认为false | 当鼠标滚轮支持激活后，在有些情况下需要反转滚动的方向。（比如，鼠标滚轮向下滚动条向上，反之亦然）。 |
| momentum | 默认为true | 在用户快速触摸屏幕时，你可以开/关势能动画。关闭此功能将大幅度提升性能。 |
| mouseWheel | 默认为false | 监听鼠标滚轮事件。 |
| preventDefault | 默认为true | 当事件触发时执行preventDefault()，具体不详。。 |
| scrollbars | 默认为false | 是否显示iscroll默认的滚动条。如果你不喜欢默认的滚动条样式，而且你认为你可以做的更好，你可以自定义滚动条样式。第一步就是设置选项scrollbars的值为’custom’，使用下面的CSS类可以简单的改变滚动条样式。 .iScrollHorizontalScrollbar，这个样式应用到横向滚动条的容器。这个元素实际上承载了滚动条指示器。 .iScrollVerticalScrollbar，和上面的样式类似，只不过适用于纵向滚动条容器。 .iScrollIndicator，真正的滚动条指示器。 .iScrollBothScrollbars，这个样式将在双向滚动条显示的情况下被加载到容器元素上。通常情况下其中一个（横向或者纵向）是可见的,实例见下方 |
| fadeScrollbars | 默认为false | 不想使用滚动条淡入淡出方式时，需要设置此属性为false以便节省资源。 |
| interactiveScrollbars | 默认为false | 此属性可以让滚动条能拖动，用户可以与之交互。 |
| resizeScrollbars | 默认为true | 滚动条尺寸改变基于容器和滚动区域的宽/高之间的比例。此属性设置为false让滚动条固定大小。 |
| shrinkScrollbars | 默认为false,有效的值为：’clip’ 和 ‘scale’。 | ‘clip’是移动指示器到它容器的外面，效果就是滚动条收缩起来，简单的移动到屏幕以外的区域。属性设置为此值后将大大的提升整个iScroll的性能。 ‘scale’关闭属性useTransition，之后所有的动画效果将使用requestAnimationFrame实现。指示器实际上有各种尺寸，并且最终的效果最好。 |
| scrollX/scrollY | 默认scrollY:true,scrollX:false | 控制哪个方向可以滚动，默认只有Y轴滚动。注意属性 scrollX/Y: true 与overflow: auto有相同的效果。设置一个方向上的值为 false 可以节省一些检测的时间和CPU的计算周期。 |
| startX/startY | 默认为0 | 默认情况下iScroll从0, 0 (top left)位置开始，通过此属性可以让滚动条从不同的位置开始滚动。 |
| tap | 默认为false | 设置此属性为true，当滚动区域被点击或者触摸但并没有滚动时，可以让iScroll抛出一个自定义的tap事件。也可以设置为具体的自定义事件名称，如：tap:’myCustomTapEvent’，触发该自定义事件只需： $(ele).on(‘myCustomTapEvent’,function(){})，都是tap的触发事件。。 |
| probeType | 默认为false,有效值有：1, 2, 3 | 这个属性是调节在scroll事件触发中探针的活跃度或者频率。有效值有：1, 2, 3。数值越高表示更活跃的探测。探针活跃度越高对CPU的影响就越大。 |
自定义滚动条样式实例：
/* Styled scrollbars */
.iScrollHorizontalScrollbar {
position: absolute;
z-index: 9999;
height: 16px;
left: 2px;
right: 2px;
bottom: 2px;
overflow: hidden;
}
.iScrollHorizontalScrollbar.iScrollBothScrollbars {
right: 18px;
}
.iScrollVerticalScrollbar {
position: absolute;
z-index: 9999;
width: 16px;
bottom: 2px;
top: 2px;
right: 2px;
overflow: hidden;
}
.iScrollVerticalScrollbar.iScrollBothScrollbars {
bottom: 18px;
}
.iScrollIndicator {
position: absolute;
background: #cc3f6e;
border-width: 1px;
border-style: solid;
border-color: #EB97B4 #7C2845 #7C2845 #EB97B4;
border-radius: 8px;
}
.iScrollHorizontalScrollbar .iScrollIndicator {
height: 100%;
background: -moz-linear-gradient(left, #cc3f6e 0%, #93004e 100%);
background: -webkit-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
background: -o-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
background: -ms-linear-gradient(left, #cc3f6e 0%,#93004e 100%);
background: linear-gradient(to right, #cc3f6e 0%,#93004e 100%);
}
.iScrollVerticalScrollbar .iScrollIndicator {
width: 100%;
background: -moz-linear-gradient(top, #cc3f6e 0%, #93004e 100%);
background: -webkit-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
background: -o-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
background: -ms-linear-gradient(top, #cc3f6e 0%,#93004e 100%);
background: linear-gradient(to bottom, #cc3f6e 0%,#93004e 100%);
}
/* end */
iScroll 事件
- beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。
- scrollCancel，滚动初始化完成，但没有执行。
- scrollStart，开始滚动
- scroll，内容滚动时触发，只有在scroll-probe.js版本中有效
- scrollEnd，停止滚动时触发。
- flick，用户打开左/右。
- zoomStart，开始缩放。
- zoomEnd，缩放结束。
关于更多的高级配置参数设置请参看iscoll5中文API
下面是一个常见的移动端网站布局，带有下拉刷新和上拉刷新功能，项目代码已提交到本人的github，源码查看请点击这里，demo4.html文件。 项目目录如下：
.
├── data
│ └── iScrollData.php
├── demo1.html
├── demo2.html
├── demo3.html
├── demo4.html //最终页面
├── js
│ ├── iscroll-infinite.js
│ ├── iscroll.js
│ ├── iscroll-lite.js
│ ├── iscroll-probe.js
│ ├── iscroll-zoom.js
│ └── zepto.min.js
└── style
└── common.css
其他补充说明
- 实现iscrll 布局结构也很重要，外层的div定位方式要尽量采用position:absolute地位来布局
- 无限加载的性能问题：引用iscroll-infinite.js。 图片尽量为背景 且 不再屏幕内时利用 visibility:hidden; 不用 display:none;是因为前者仍然占据文档流。
- 监听scroll事件，引用iscroll-probe.js。且设置配置参数probeType: 1，该值用于监听 scroll 事件，表示敏感程度 分别为 1,2,3级，最高3级，只有设置了 该值，scroll 事件才起作用。
- myScroll.refresh()，动态添加元素后，要重新refresh下，保证插件正常。
- 巧妙的利用布局，可以实现startY等位置偏移，下拉刷新等效果。
- 更多的属性可以通过console.log(this/myScroll)，来查看学习。