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 ;

                            background-color:#EE33FC;

                        }

                 </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 ;

                            background-color:#EE33FC;

                        }

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

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


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







  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值