iScroll.js 使用方法参考(2)

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

缩放(pinch / zoom)  'Pull to refresh' demo

我们不得不面对一个事实,那就是光有滚动其实没什么新意的。这就是为什么在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)  'Carousel' demo

  SNAP功能是判断元素是否滑动到指定位置。通过这个效果可以制作花哨的跑马灯效果。

  插件会自动分析滚动区域内相同标签或相同大小的元素做为捕捉对象,也可以通过参数指定捕捉的对象    

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

可以通过设置snap参数为指定标签来设定捕捉对象。比如捕捉li标签。

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpfys.html