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，大家会不会觉得很简单，下面我们分析下以上代码。

<div id="wrapper">
    <div class="scroller">
        这里是滚动的内容
    </div>   
</div>

 

   iScroll要求将需要显示的内容放在一个wrapper中，这个wrapper指的就是内容显示的区域。这个wrapper中包含有要显示的内容，也就scroller里面包含的内容。

#wrapper{
    width:100% ;
    height:500px;
}
 .scroller{
    width:100%;
    height:2000px ;
}

 

这里需要将wrapper的高度固定，这是必须要的。我们可以理解为这是一个虚拟的屏幕，我们内容就是在这个虚拟的屏幕滚动显示，在移动端的时候，我们可以在内容渲染完成之后通过JavaScript动态的设置wrapper的高端。

 scroller的高为2000px，这里的scroller高度必须大于wrapper的高度，否则iscroll不能起到滚动的作用。我们在scroller里面添加内容的时候，要注意布局，否则很容易出现iscroll滚动不了的情况。

 

Note：使用iScroll的时候只要注意上面两点去做的话，正常情况都是没有问题的。这是我在项目对iscroll最简单明了的总结，至于其他功能，你只要参照API去使用就行了。

posted @ 2017-04-06 01:34  落花之语  阅读(178)  评论(0)  编辑  收藏  举报