iSroll5用着确实不错,做混合app的首选,能给项目添加不少效果。iScroll 不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅 4kb 大小的 iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能。
你可以用它实现上拉加载和下拉刷新的效果,也可以实现懒加载的效果,也可以用来做横向滚动的幻灯片效果。
先从最简单的结构说起吧
<pre name="code" class="html"><span style="font-size:14px;"><div id="wrapper">
<div id="scroller">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div</span>
把上面的代码添加进你的html文件中就可以了,当然我们还得写一些JS代码
<span style="font-size:14px;"><script>
var myScroll = new IScroll('#wrapper');
</script></span>
在这里我们新创建了一个iSroll对象,值得注意的是在iScroll5中new新对象的时候使用的是IScroll,和4中的是有区别的。另外需要注意的是iScroll只会选取第一个子标签作为滑动的内容,也就是说上面html代码中如果id=scroller的div标签有其他兄弟标签的话那iScroll还是会选择第一个作为滚动内容。完整代码如下:在这里想说的是上面代码是在onload之后初始化的iScroll,如果我们的内容数据比较多,或者我们的页面上有用ajax异步获取数据的地方,那么你会发现我们的这个iScroll能滚动的只是整个页面的一部分,原因之后再讲。
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new IScroll('#wrapper');
}
</script>
</head>
<body οnlοad="loaded()">
<div id="wrapper">
<div id="scroller">
<ul>
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div>
</body>
</html>
有时候我们在初始化iScroll的时候需要配置一些参数,例如:
<span style="font-size:14px;">var myScroll = new IScroll('#wrapper', {
mouseWheel: true,
scrollbars: true
});</span>
上面的例子示例了在 iScroll 初始化时开启鼠标滚轮支持和滚动条支持。
类似的参数还有:
myScroll = new IScroll('#wrapperSale', {
preventDefault:false,//为true就是阻止事件冒泡
click: true,//允许点击操作,在做app特别有用
probeType: 3,//表明此插件,可以监听scroll事件
scrollX: true,//同意在X方向上滚动
scrollY: true,//同意在Y方向上滚动
momentum: true,//允许惯性效果
snap: true//分页效果,滚动不需要,但是在做幻灯片时需要
})
当然不止上面这些属性,其他还有一些,以后讲到专门用到这些属性的时候再细细分析
更多配置请查看:iScroll5中文API
这篇讲解的比较浅显,主要是简单的结构是各种iScroll应用场景的基础,都是在其基础上添加相应的代码
下一篇:用iScroll5实现幻灯片效果