除了以前版本的iScroll的特性以外,iScroll 4还包括如下的特性:

(1)缩放(Pinch/Zoom)

(2)拉动刷新(Pull up/down to refresh)

(3)速度和性能提升

(4)精确捕捉元素

(5)自定义滚动条

友情提示:iScroll 4并不是iScroll 3的简易替代版本,API文档已经不一样了。同时考虑到此版本正处于测试期,一些API可能会有细微的变化。

使用指南

在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档,可能有点小无聊,但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。

iScroll需要对所要进行滚动的元素进行初始化,并且不限定一个页面中使用iScroll的元素的个数(这里不考虑您的硬件配置)。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里
可以同时使用的元素的个数。

使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。

最优的使用iScroll的结构如下所示:

<div id="wrapper">

        <ul>

               <li></li>

               .....

        </ul>

</div>

在这个小例子中,ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。

【注意事项】:

只有wrapper里的第一个子元素才可以滚动,如果你想要更多的元素可以滚动,那么你可以试试下面的这种写法:

<div id="wrapper">

        <div id="scroller">

               <ul>

                    <li></li>

                     ...

                </ul>

                <ul>

                         <li></li>

                          ...

                </ul>

       </div>

</div>

在这个例子中,scroller这个元素可以滚动,即便它包含两个ul元素

iScroll必须在调用之前实例化,你可以在下面几种情况下对iScroll进行实例化:

(1)onDOMContentLoaded

(2)onLoad

(3)以内联inline方式

下面我们逐个来讲讲这三种用法的优缺点

ONDOMContentLoaded

适用于滚动内容只包含文字、图片,并且所有的图片都有固定的尺寸

使用方法:(在head标签中添加如下代码)

        <script src="iscroll.js"></script>

        <script>

                 var myscroll;

                function loaded(){

                           myscroll=new iScroll("wrapper");

                 }

               window.addEventListener("DOMContentLoaded",loaded,false);

         </script>

注意:myscroll这个变量是全局的,因此你可以在任何地方调用它的函数onLoad

有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的,因此此时页面的资源可能还没有全部加载完毕。如果你遇到了一些很怪异的行为可以试试下面的写法:

        <script src="iscroll.js"><script>

        <script>

                    var myscroll;

                    function loaded(){

                   setTimeout(function(){

                            myscroll=new iScroll("wrapper");

                     },100 );

                }

                window.addEventListener("load",loaded,false);

         </script>

这种情况下iScroll会在页面资源(包括图片)加载完毕100ms之后得到初始化,这应该是一种比较安全的调用iScroll的方式。

inline初始化

这种情况会在页面加载到js的时候就进行调用,此方法不推荐使用,但是很多javascript的大牛都在用这种方式,我又有什么理由不赞成呢?

         <script src="iscroll.js"></script>

                    <div id="wrapper">

                            <ul>

                                <li></li>

                                 ...

                          </ul>

                  </div>

        <script>

                   var myscroll=new iScroll("wrapper");

        </script>

不过建议你使用一些框架的ready方法来安全调用iScroll(比如jquery里的ready())。iScroll里传递的参数

iScroll里的第二个参数允许你自定义一些内容,比如下面的这段代码:

       <script>

                 var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});

       </script>

第二个参数通常都是一个对象,像上面的这个例子里就设定了不显示滚动条。常用的参数如下:

               hScroll               false 禁止横向滚动 true横向滚动 默认为true

               vScroll               false 精致垂直滚动 true垂直滚动 默认为true

               hScrollbar         false隐藏水平方向上的滚动条

               vScrollbar         false 隐藏垂直方向上的滚动条

               fixedScrollbar  在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出

                                        scroller的可见区域。默认在Android上为true, iOS上为false

               fadeScrollbar  false 指定在无渐隐效果时隐藏滚动条

               hideScrollbar  在没有用户交互时隐藏滚动条 默认为true

               bounce            启用或禁用边界的反弹,默认为true

               momentum     启用或禁用惯性,默认为true,此参数在你想要保存资源的时候非常有用

               lockDirection  false取消拖动方向的锁定, true拖动只能在一个方向上(up/down 或者left/right)

为了保持资源的完整性,建议去除滚动条拉动刷新(pull to refresh)

自从Twitter和一些Apple的本地化应用出现了这个效果之后,这个效果就变得非常流行。你可以看看这儿先一睹为快。

我最近把"pull to refresh"这个部分单分出来作为iScroll的一个额外插件。你可以点击这儿看看pull to refresh是如何工作滴。你只需要做的就是自定义pullDownAction()这个方法。你可能需要一个ajax来加载新的内容,不过一旦DOM树发生了变化要记得调用refresh这个方法来。需要记住的是在例子中我们加了1秒的延迟来模拟网络的延迟效果。当然,如果你不想使用这个延迟,那就把setTimeout方法去掉就行了。

缩放(pinch / zoom)

我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放

大和缩小。想要这个功能,只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。

双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能,你至少需要如下配置:

var myScroll =new iScroll("wrapper",{zoom:true});

如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项:

zoomMax   指定允许放大的最大倍数,默认为4

【注意事项】:如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说,就是在所有需要缩放的img元素上使用-webkit-transform:translate3d(0,0,0)来实现,而且尤为重要的是,硬件的加速会占用大量资源,要谨慎使用,否则你的应用可能就此崩溃。

捕捉元素(snap and snap to element)

捕捉的功能会促使scroller去重新定义位置,这样可以制作更加花哨的传送带效果。点击这里有个小例子。

默认情况下,iScroll将scroller分成四分体,或者是相同大小的wrapper。iScroll 4加入了这个属性允许捕捉scroller里的任何元素,不考虑外部wrapper的大小。如果你想要实现这样的传送带效果,我建议你使用“quadrant”分割。最佳的设置如下:

                 var myscroll=new iScroll("wrapper",{

                       snap:true,

                       momentum:false,

                       hScrollbar:false,

                       vScrollbar: false

                  });

捕获元素,可以通过传递一个字符串来作为查询条件,如下:

                var myscroll=new iScroll("wrapper",{

                      snap:"li",

                      momentum:false,

                      hScrollbar:false,

                      vScrollbar:false

                });

在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素

自定义滚动条(custom scrollbars)

在iScroll 4这个版本中,可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数,如下:

                  var myscroll=new iScroll("wrapper",{

                     scrollbarClass: "myScrollbar"

                 });

你可以点击这里看一个小例子,在这个小例子里,myScrollbarH这个类被添加到了水平滚动条上,myScrollbarV这个类则被添加给了垂直方向上的滚动条上了。需要提醒的是,滚动条是由两个元素组合而成的:容器和显示器。容器同wrapper的高度相同,而显示器则代表的是滚动条本身。

滚动条的HTML结构如下:

                  <div class="myScrollbarV">

                          <div></div>

                  </div>

                 .myscrollbarV{

                           position:absolute;z-index:100;width:8px;bottom:7px;top:2px;right:1px;

                  }

                .myScrollbarV > div {
                           position:absolute;
                           z-index:100;
                           width:100%;
                             /* The following is probably what you want to customize */
                           background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
                           border:1px solid #800;
                          -webkit-background-clip:padding-box;
                          -webkit-box-sizing:border-box;
                          -webkit-border-radius:4px;
                          -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
                 }

通用方法:

     (1)refresh                          在DOM树发生变化时,应该调用此方法

     (2)scrollTo()                     滚动到某个位置

               eg: myscroll.scrollTo(0,10,200,true);

     (3)scrollToElement()      滚动到某个元素

               eg: myscroll.scrolToElement("li:nth-child(10)",100);

     (4)detroy()                       完全消除myscroll及其占用的内存空间

                eg: myscroll.destroy()
 

手机端iscoll插件的使用方法的更多相关文章

  1. Css实现手机端页面强制横屏的方法示例

    样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 @media screen ...

  2. 手机端图片插件可缩放 旋转 全屏查看photoswipe

    官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...

  3. 手机端 video 视频自动播放方法

    //创建一个video标签 var __video = $("#video").appendTo('.i-i-video'); //设置视频文件地址 __video.attr('s ...

  4. DT6.0二次最后一次开发插件-手机端熊掌号定时提交

    今天写完这个,就是DT6.0最后开放的插件,因为群里的朋友需要,就写了一个适合DT6的手机端定时插件.不过个人还是喜欢7.0的版本,7.0的插件在上几期分享了,今天就不过多说了! 我这个是初成品,改善 ...

  5. css的盒模型手机端兼容写法应该是啥样的呢?

    前言:刚刚接触css3的盒模型,感觉对于解决水平垂直居中.固定宽度/高度和可变宽度/高度同时存在这样的问题很有效.但是最近在看一个腾讯手机端框架(Frozen UI )的时候发现一个很神奇的多行文字截 ...

  6. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  7. Android系统手机端抓包方法

    抓包准备 1. Android手机需要先获得root权限.一种是否获得root权限的检验方法:安装并打开终端模拟器(可通过安卓市场等渠道获得).在终端模拟器界面输入su并回车,若报错则说明未root, ...

  8. ThinkPHP3.2判断手机端访问并设置默认访问模块的方法

    ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...

  9. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

随机推荐

  1. java设计模式之装饰器模式以及在java中作用

    在JAVA I/O类库里有很多不同的功能组合情况,这些不同的功能组合都是使用装饰器模式实现的,下面以FilterInputStream为例介绍装饰器模式的使用  FilterInputStream和F ...

  2. static 关键字解析(转)

    static关键字解析   Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面 ...

  3. Python参考

    python中os模块用法 自动化运维Python系列(五)之常用模块 最常用的Notepad++的快捷键 pycharm快捷键 最全Pycharm教程(1)——定制外观 pycharm教程大全 py ...

  4. java获得采集网页内容的方法小结

          为了写一个java的采集程序,从网上学习到3种方法可以获取单个网页内容的方法,主要是运用到是java IO流方面的知识,对其不熟悉,因此写个小结. import java.io.Buffe ...

  5. ubutu下source命令问题(复制)

    最近一段时间在使用Bash on Ubuntu on Windows做shell脚本调试时发现在脚本中使用source时会报错,上网查了下才了解到原来是在Ubuntu中使用的并不是bash,而是使用 ...

  6. scp源码浅析

    背景: 经常使用scp传文件,发现它真的很给力,好奇心由来已久! 恰好接到一个移植SSH服务到专有网络(非IP网络)的小任务,完成工作又能满足好奇心,何乐而不为! 我只从源码浅浅的分析一下,后续有更多 ...

  7. Android问题:could not install *smartsocket* listener;Address already in use

     今天启动genymotion后,发现没有ip地址,运行项目时报错:     可见,没有连接到模拟器,无法运行,而先前说过没有ip,自然而然连接不上,   解决放法:将资源管理器打开,将adb全部退出 ...

  8. PokeCats开发者日志(一)

      现在是PokeCats游戏开发的第三天的上午,突然心血来潮想记录一下这个开发过程,于是写起了开发者日志. day1   作为一只ACM退役喵,寒假回家,闲着没事,天天在召唤师峡谷里闲逛也挺没意思的 ...

  9. sudo是干哈子的

    我sudo loop发现啊大家就都是root了,那么这和我直接用root起有啥区别呢? root      3826  0.0  0.1  56596  3984 pts/2    S+   12:5 ...

  10. 【题解】Bzoj4316小C的独立集

    决定要开始学习圆方树 & 仙人掌相关姿势.加油~~ 其实感觉仙人掌本质上还是一棵树,长得也还挺优美的.很多的想法都可以往树的方面上靠,再针对仙人掌的特性做出改进.这题首先如果是在树上的话那么实 ...