iScroll的使用
Posted 落花之语
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iScroll的使用相关的知识,希望对你有一定的参考价值。
在HTML5移动开发中,iScroll能帮我们做不少的事情,下面我们就来学学iscroll怎么使用。
1、首先看段简单的代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" chartset="utf-8">
<title>iScroll的简单测试</title>
<style type="text/css">
#wrapper{
width:100% ;
height:500px;
}
.scroller{
width:100%;
height:2000px ;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="scroller">
这里是滚动的内容
</div>
</div>
<script type="text/JavaScript" src="iscroll.js">
<script type="text/javascript">
var myIscroll = new iScroll("wrapper",{checkDOMChanges:true}) ;
</script>
</body>
</html>
以上就是iScroll的一个简单Demo,大家会不会觉得很简单,下面我们分析下以上代码。
a、
<div id="wrapper">
<div class="scroller">
这里是滚动的内容
</div>
</div>
iScroll要求将需要显示的内容放在一个wrapper中,这个wrapper指的就是内容显示的区域。这个wrapper中包含有要显示的内容,也就scroller里面包含的内容。
b、
#wrapper{
width:100% ;
height:500px;
}
.scroller{
width:100%;
height:2000px ;
}
这里需要将wrapper的高度固定,这是必须要的。我们可以理解为这是一个虚拟的屏幕,我们内容就是在这个虚拟的屏幕滚动显示,在移动端的时候,我们可以在内容渲染完成之后通过JavaScript动态的设置wrapper的高端。
scroller的高为2000px,这里的scroller高度必须大于wrapper的高度,否则iscroll不能起到滚动的作用。我们在scroller里面添加内容的时候,要注意布局,否则很容易出现iscroll滚动不了的情况。
Note:使用iScroll的时候只要注意上面两点去做的话,正常情况都是没有问题的。这是我在项目对iscroll最简单明了的总结,至于其他功能,你只要参照API去使用就行了。
以上是关于iScroll的使用的主要内容,如果未能解决你的问题,请参考以下文章
在 Angular 2 / Typescript 中使用 IScroll