iScroll 5不工作時，第2頁應該是滾動

我使用的Apache Cordova 2.2iScroll 5不工作時，第2頁應該是滾動

 jquery 1.7.2 
     jquery mobile 1.4.3 
     iscroll 5 (Matteo Spinelli ~ http://cubiq.org/)

我有以下的index.html：

<div data-role="page" id="id1"> 
    <div data-role="header" data-position="fixed"> 
    </div> 
    <div data-role="content" id="id2"> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
    </div> 
</div> 

<div data-role="page" id="thisshouldscroll"> 
    <div data-role="header" data-position="fixed"> 
    <div id="buttondiv" data-role="navbar"> 
        some buttons 
    </div> 
    </div> 
    <div data-role="content" id="id4"> 
     <!-- need scrollable list here --> 
     <div id="wrapper" > 
      <div id="scroller"> 

      </div> 
     </div>   
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <div id="bottombuttondiv" data-role="navbar"> 
      some buttons 
     </div> 
    </div> 
</div> 

<div data-role="page" id="id5"> 
    <div data-role="header" data-position="fixed"> 
    </div> 
    <div data-role="content" id="id6"> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
    </div> 
</div>

我顯示滾動頁面ID =」 thisshouldscroll」如下：

$.mobile.changePage("#thisshouldscroll", { transition: "slideup"}); 
buildScrollingData(); 
myScroll = new IScroll('#wrapper', { 
    mouseWheel: true, 
    scrollbars: true 
});

別處我已經定義：

function displayScrollingData(){ 
    var contentToAppend=""; 

    //loop web service data add certain data to contentToAppend with 
     contentToAppend = contentToAppend + 
          str1 + "<BR>" + 
          str2 + "<BR>" + 
          str4 + "<BR>" + 
          str3 + "<BR><BR>"; 

    $("#scroller").append(contentToAppend); 

} 

function buildScrollingData(){ 
     //call a web service, put results in an array 
     dispayScrollingData() 
}

我也有：

function onLoad() { 
    document.addEventListener("deviceready", onDeviceReady, false); 
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
}

的數據不滾動，如果我的初始化搞砸了不知何故，我不知道。

page id =「thisshouldscroll」在我的應用程序中第二個顯示。

有沒有人知道正確的順序來初始化iScroll 5當它的第二頁應該有滾動功能？

如果初始化是好的，任何人都可以提示我缺少什麼？

來源

2014-09-21 user1126515

至少在JQM 1.4中使用jquery 1.8.3。此外，您可能需要在初始化iscroll之前添加元素，因爲它會爲可滾動的div添加額外的標記。 – Omar 2014-09-21 17:50:22

我已經添加了jquery 1.8.3，並且在$（「＃scroller」）後立即將myScroll init移動到了附件中。append（contentToAppend）;在displayScrollingData（）中，但它不起作用 – user1126515 2014-09-21 18:04:58

然後，你最好在'pagecontainershow'上初始化iScroll。你現在可以使用委託給'＃thisshouldscroll'頁面的'pageshow'事件。 – Omar 2014-09-21 18:25:03

對於Iscroll 5我擁有它按以下方式設置。如果您喜歡多個頁面上的滾動，則爲該頁面提供myscroll和包裝的唯一名稱。 Document Ready用於測試目的，因此在頁面初始化時使用所需的JQM過程。同樣值得注意的是，由於包裝具有頂部和底部像素<div data-role="content" ...實際上並不需要使用調節器。

var myScroll; 

$(document).ready(function(){ 

     myScroll = new IScroll('#wrapper', 
         { 
          scrollX: false, 
          scrollY: true 
          ,click:true // open click event 
          ,scrollbars: false 
          ,useTransform: true 
          ,useTransition: false 
          ,probeType:3, 
          mouseWheel:true, 
          bindToWrapper: true 
     }); 

}); 


function initscroll() { 

    setTimeout(function() { 
      myScroll.refresh(); 
     }, 1000); 
    }

刷新滾動，你需要在Pageshow或Apending數據後，列表

initscroll()

我也用下面的HTML和追加數據ID（列表視圖）

<div data-role="content" id="main" class="custom_content"> 
    <div id="wrapper" class="wrapper"> 
     <div id="scroller"> 
      <ul data-role="listview" id="listview"> 
      </ul> 
     </div> 
     </div> 
</div>

演示忽略長碼我n表示是在Iscroll堵小提琴，向下滾動，直到你看到//// JQM STUFF

http://jsfiddle.net/z50cg1jf/

更新2014年11月 - 爲Android網頁視圖上測試（奇巧，用Webchrome）API 19

如果您遇到的Android手機或平板電腦上的壞滾動性能刪除

probeType：3

並設置過渡到真正的

useTransition：真

也使硬件加速在Android的WebView應用程序。

Iscroll 5現在應該飛行。我花了幾個小時試圖改善webview上的Iscroll性能，偶然我嘗試了上述方法。

來源

2014-09-22 01:10:30 Tasos

iScroll 5不工作時，第2頁應該是滾動

回答

相關問題