• 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{

                                   100% ;

                                   height:500px;

                                 }

                           .scroller{

                                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{

                                   100% ;

                                   height:500px;

                                 }

                           .scroller{

                                100%;

                                height:2000px ;

                               

                            }

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

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

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

  • 相关阅读:
    NSIS 2.0界面快速入门
    [反汇编练习] 160个CrackMe之016
    [反汇编练习] 160个CrackMe之015
    [反汇编练习] 160个CrackMe之014
    [反汇编练习] 160个CrackMe之013
    Ubuntu 安装之python开发
    git 技能图
    linux 系统 权限
    Git 常用命令
    python 之virtualenv和virtualenvwrapper使用
  • 原文地址:https://www.cnblogs.com/chbyl/p/6671403.html
Copyright © 2020-2023  润新知