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，助力应用开发者获取最大化广告收入