iScroll5的入门

最新推荐文章于 2017-10-27 18:08:58 发布

zfy865628361

最新推荐文章于 2017-10-27 18:08:58 发布

阅读量1.2k

点赞数

分类专栏： JavaScript html PhoneGap

本文链接：https://blog.csdn.net/zfy865628361/article/details/50339437

版权

JavaScript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

PhoneGap

8 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

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

zfy865628361

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
iScroll5的入门

iSroll5用着确实不错，做混合app的首选，能给项目添加不少效果。iScroll 不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅 4kb 大小的 iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。你可以用它实现上拉加载和下拉刷新的效果，也可以实现懒加载的效果，也可以用来做横向滚动的幻灯片效果。先从最简单的结构说起吧
复制链接

扫一扫