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的觸摸下響應拖」