Touchmove和使用jQuery Mobile和PhoneGap的Android中滚动内容 [英] Touchmove and scrollable content using Jquery Mobile and Phonegap in Android
问题描述
好了，所以我发现，使用jQuery Mobile和PhoneGap的开发Android应用程序工作正常，在机器人4+，但旧版本，例如2.2.2滚动功能中断。所以我试图用iScroll，但也有相互矛盾的问题，最终我决定写一个JavaScript函数来处理它。它用于工作，但现在它的破裂。
Ok so I found that using Jquery Mobile and Phonegap to develop android App works fine in android 4+, but on older versions for example 2.2.2 the scrollable functionality breaks. So I tried to use iScroll, but there were conflicting issues, eventually I just decided to write a Javascript function to handle it. It used to work but now its broken.
所以在这里，它是：
<!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>
我还是一个初级开发人员，所以我的code是不完美的，对不起。但它应该工作，在Android中3+不执行该功能，因为滚动已经工作。在安卓2.9.9或更少它。它应使格滚动的，但它不，它曾经后来我把它弄坏了不知何故，我无法弄清楚如何。如果有人知道或能看到它打破我会永远爱你告诉我。谢谢你。
I'm still a junior developer so my code isn't perfect, sorry. But It should work, in Android 3+ it doesn't execute the function, because the scrolling already works. In Android 2.9.9 or less it does. And it should make the div scrollable, but it doesn't, it used to but then I broke it somehow and I can't figure out how. If anyone knows or can see where Its broken I will love you forever for telling me. Thanks.
修改我也一直得到一个黄色的错误在Eclipse LogCat中指出：小姐，我们正在等待的WebCore的响应触摸向下拖动
Edit I also keep getting a yellow error in Eclipse LogCat stating: "Miss a drag as we are waiting for WebCore's response for touch down"
推荐答案
尝试更换：
<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">
这篇关于Touchmove和使用jQuery Mobile和PhoneGap的Android中滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
