PhoneGap中文网

标题: Android版添加phonegap--iscroll4框架插件教程 [打印本页]

作者: angel1994 时间: 2015-12-29 14:59
标题: Android版添加phonegap--iscroll4框架插件教程
最优的使用iScroll的结构如下所示：
//isScroll JS
var myScroll;
function loaded() {
myScroll = new iScroll(‘wrapper’, { checkDOMChanges: true });
/*
setInterval(function () {
if (myScroll.isReady())
document.getElementById(‘thelist’).innerHTML += ‘<UL><LI>new row</LI></UL>’;
}, 2000);
*/
}
document.addEventListener(‘touchmove’, function (e) { e.preventDefault(); }, false);
document.addEventListener(‘DOMContentLoaded’, loaded, false);
<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
</ul>
</div>
</div>

iScroll里传递的参数
iScroll里的第二个参数允许你自定义一些内容，比如下面的这段代码：
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。常用的参数如下：
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）

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

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

iScroll缩放(pinch / zoom)
我们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放大和缩小。想要这个功能，只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能，至少需要如下配置：
var myScroll =new iScroll("wrapper",{zoom:true});
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项：
zoomMax 指定允许放大的最大倍数，默认为4。

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

iScroll捕捉元素（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
});
iScroll捕获元素，可以通过传递一个字符串来作为查询条件，如下：
var myscroll=new iScroll("wrapper",{
   snap:"li",
   momentum:false,
   hScrollbar:false,
   vScrollbar:false
});
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素

iScroll自定义滚动条（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%;
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);
}

iScroll通用方法：
（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()

KeyMob移动广告平台，是中国专业的广告优化管理平台，为广告主提供专业的移动广告投放、IOS、Android应用交叉推广、移动营销广告高效的优化管理等服务，为应用开发者提供高效、稳定的手机广告SDK，助力应用开发者获取最大化广告收入

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)