2012-03-04 103 views
0

我正在嘗試將JQM和iScroll 4用於項目並將其轉換爲帶有xCode的本機應用程序。 我喜歡使用iScroll,因爲必須始終顯示頁眉和頁腳。 問題是,滾動部分不工作,它創建'滾動div',但是當我嘗試滾動它時,它會彈回頂部。JQM + iScroll 4滾動奇怪的滾動

這是我的HTML和JS

一個簡單的HTML頁面:

<div data-role="page" class="pages" id="home"> 
    <div data-role="header"> 
     <a href="#"class="showMenu menuBtn" data-icon="grid" data-iconpos="notext">Menu</a> 
     <h1>header</h1> 
    </div> 
    <div data-role="content"> 
     <div id="wrapper"> 
      <div id="slide-content"> 
       <h3>Slide Menu</h3> 
       <ul data-role="listview"> 
        <li><a href="#home">Scroll naar benenden 
         </a></li> 
          ... lots of <li> 
          <li><a href="#home">Scroll naar benenden 
         </a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 
    <div data-role="footer"> 
     <h1>footer</h1> 
    </div> 
</div> 

JS:

var myScroll 
function loaded() { 
    myScroll = new iScroll('wrapper'); 
} 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
document.addEventListener('DOMContentLoaded', loaded, false); 

如果您需要更多的信息,請您將收到:)

謝謝

回答

1

您也可以使用推翻,儘管仍然是實驗。它由Filament/JQM開發,所以我認爲這將是繼續前進的方式,因爲scrollview將不再被支持。

在這裏看到:http://filamentgroup.com/lab/overthrow/

這裏:http://filamentgroup.github.com/Overthrow/

+0

不錯,並且這也適用於原生Android應用程序? – 2012-03-04 21:18:47

+0

um。還沒有真正嘗試過,前幾天剛剛被推翻,但是從他們說的應該是跨平臺解決方案 – frequent 2012-03-04 21:45:26

+0

Yup ,非常感謝!作品像一個魅力;) – 2012-03-06 19:48:43

1

您是否看過jqm 1.1版(應該會很快發佈),它有一個持續的頁眉和頁腳,您可以在這裏查看rc1文檔:http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/footer-persist-a.html

+0

好吧,不錯,也許我會在將來使用它。但目前,我會與@frequent – 2012-03-04 21:21:18

+0

解決方案一起使用我也在瀏覽器中嘗試了這一點,沒有問題,但是當我轉到本地時,它會在我嚴格處理內容時滑動。壞::( – 2012-03-05 14:26:09

0

你的問題可以很容易地得到解決。問題是iScroll無法確定滾動div的高度。潛在的原因是:

  • 不正確的CSS
  • 內容需要時DOMContentLoaded被激發是不完整的加載。