iScroll5的入门

来源：互联网发布：域名投资人张尧编辑：程序博客网时间：2024/05/21 08:00

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 onload="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实现幻灯片效果

0 0