2012-09-20 38 views
2

好吧,所以我發現使用Jquery Mobile和Phonegap開發android應用程序在Android 4+中工作正常,但在較早版本的例如2.2.2中,可滾動功能打破。所以我嘗試使用iScroll,但是存在衝突的問題,最終我決定編寫一個Javascript函數來處理它。它曾經工作,但現在它破碎了。在Android中使用Jquery Mobile和Phonegap的觸摸移動和可滾動內容

所以在這裏,它是:

<!DOCTYPE HTML> 
    <html> 

<head> 

<title>Cordova</title> 

      <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> 
      <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.1.min.js"></script> 
      <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0-beta.1.min.js"></script> 


      <style> 
      .scrollstyle{ 
      height: 320px; 
      } 
      </style> 


      <script type="text/javascript"> 

      document.addEventListener("deviceready", checkVersion, false); 

       function checkVersion() { 

        var droidversion = device.version; 

        myversion = droidversion.substr(0,1); 

        alert(myversion); 

        if (parseInt(myversion) < 3) { 
         alert("do the scroll"); 
         setTimeout(function() { 
          var startY = 0; 
          //var startX = 0; 
          var b = document.body; 
          b.addEventListener('touchstart', function (event) { 
           startY = event.targetTouches[0].screenY; 
           //startX = event.targetTouches[0].screenX; 
          }); 

          b.addEventListener('touchmove', function (event) { 
           event.preventDefault(); 
           var posy = event.targetTouches[0].screenY; 
           var h = parent.document.getElementById("scrolldroid"); 
           var sty = h.scrollTop; 

           //var posx = event.targetTouches[0].screenX; 
           //var stx = h.scrollLeft; 
           h.scrollTop = sty - (posy - startY); 
           //h.scrollLeft = stx - (posx - startX); 
           startY = posy; 
           //startX = posx; 
          }); 
         }, 1000); 

        } else { 
         alert("havent done it!"); 
         return false; 
        } 
       } 


      </script> 

      <link rel="stylesheet" href="css/jquery.mobile-1.2.0-beta.1.min.css" type="text/css" /> 

    </head> 
    <body> 
      <div data-role="dialog" id="main" data-theme="a"> 

       <div data-role="header" class="header"> 

        <h1>Styles</h1> 

       </div><!-- /header --> 

        <div data-role="content" data-them="a"> 

         <div id="scrolldroid" class="scrollstyle"> 


           <ul data-role="listview">  
            <li>OK, that works, but why is the scrollbar</li> 
            <li> scrolled down to the bottom of the dialog </li> 
            <li>fsgsgestcontent, and not at the </li> 
            <li>Line4</li> 
            <li>Line5</li> 
            <li>Line6</li> 
            <li>Line7</li> 
            <li>Line8</li> 
            <li>Line9</li> 
            <li>Line10</li> 
            <li>Line11</li> 
            <li>Line12</li> 
            <li>Line13</li> 
            <li>Line14</li> 
            <li>Line15</li> 
            <li>Line16</li> 
            <li>Line17</li> 
            <li>Line18</li> 
            <li>Line19</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
            <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li> 
           </ul> 

         </div> 

        </div><!-- /content --> 

       <div data-role="footer" class="footermodal"> 
        <h1>footer</h1> 

       </div><!-- /footer --> 

      </div> 
     </body> 
    </html> 

我仍然是一個初級開發人員,所以我的代碼是不完美的,對不起。但它應該可以工作,在Android 3+中它不會執行該功能,因爲滾動已經起作用。在Android 2.9.9或更低版本中,它的確如此。它應該使div滾動,但它不,它曾經,但後來我打破了它,我不知道如何。如果有人知道或可以看到它破碎的地方,我會永遠愛你,告訴我。謝謝。

編輯我也總是收到黃色的錯誤在Eclipse的logcat指出:「小姐,我們正在等待的WebCore的觸摸下響應拖」

回答

0

嘗試更換:

<div data-role="dialog" id="main" data-theme="a"> 

通過

<div data-role="page" id="main" data-theme="a"> 

,並刪除ID 股利scrolldroid

<div id="scrolldroid" class="scrollstyle"> </div> 

並替換:

<div data-role="footer" class="footermodal"> 

通過

<div data-role="footer" data-position="fixed" data-tap-toggle="false">