zoukankan      html  css  js  c++  java
  • 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去使用就行了。

  • 相关阅读:
    MySQL中的InnoDB中产生的死锁深究
    MySQL中的触发器应用
    你除了在客户端上会使用Cookie,还能使用哪些可以作为数据缓存呢?
    js中实现输入框类似百度搜索的智能提示效果
    linux系统中启动mysql方式已经客户端如和连接mysql服务器
    linux系统安装mysql数据库
    Linux中实用的命令
    Linux下安装jdk中遇到的坑
    Git初始化配置以及配置github
    springboot中配置文件使用2
  • 原文地址:https://www.cnblogs.com/chbyl/p/6671403.html
Copyright © 2011-2022 走看看