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，助力應用開發者獲取最大化廣告收入