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去使用就行了。

  • 相关阅读:
    深入理解 Java中的 流 (Stream)
    算法学习
    编译Opencv的GPU,利用CUDA加速
    【linux】【windows】查看你想访问的电脑Ip 和 端口是否 通畅
    【docker】centos7 上拉取docker镜像,一直拉取不到,报错:Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled while w
    【mybatis】标签条件中判断入参属性值是否包含子字符串
    【java】Java多线程总结之线程安全队列Queue【转载】
    【spring boot】【redis】spring boot 集成redis的发布订阅机制
    【spring boot】spring boot 基于redis pipeline 管道,批量操作redis命令
    【java】java删除文件delete和deleteOnExit 方法的区别,为什么调用deleteOnExit无效?
  • 原文地址:https://www.cnblogs.com/chbyl/p/6671403.html
Copyright © 2011-2022 走看看