flu*_*xim 6 jquery android jquery-mobile cordova
我正在使用JQuery 1.1.0和Phonegap 1.9.0开发适用于Android的html5应用程序.我有一个小动画,在画布上绘制电池并更新它.它看起来像一个正在装载的电池.它在android 4.0.4上运行得非常好.
昨天我在Galaxy Nexus上收到了Android 4.1.1的更新.在那次改变后,我的动画出现了问题.现在它绘制到画布上的图像,一个在前面,另一个在后面有错误的坐标.我认为它与Java Script Engine V8的更改有关,可能是缓存问题？!在我的电脑上的每个浏览器上,动画效果都非常好.
我的HTML代码是:
<!DOCTYPE html>
<html>
<head>
<title>Hella App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css"/>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="dataPageBattery" data-theme="a">
<h2 align="center">Battery State</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div data-role="content" align="center">
<canvas id="myBatteryCanvas" width="device-width"
height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
<h4 align="center" id="batteryProzent"></h4>
<script type="text/javascript" src="battery.js"></script>
<script>$(document).on("pageshow",init());</script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Cars</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div>
</div>
<script>
$('#dataPageBattery').on('swipeleft',function(){
$.mobile.changePage("geolocation.html", { transition: "slide"});
console.log('slideLeft');
})
$('#dataPageBattery').on('swiperight',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>
我的java脚本代码,我正在加载:
var canvas = document.getElementById("myBatteryCanvas");
var ctx = canvas.getContext("2d");
var x = 50;
var y = canvas.height - 30;
var mx = 2;
var my = 1;
var WIDTH = canvas.width;
var HEIGHT = canvas.height;
var prozent = 1;
function drawRect(y, farbe) {
ctx.beginPath();
ctx.rect(124, y, 50, 21);
ctx.fillStyle = farbe;
ctx.fill();
window.setTimeout("draw()", 10);
}
function draw() {
if (y >= 80) {
y -= my;
window.setTimeout("drawRect(y,'red')", 10);
} else if (y >= 50) {
y -= my;
window.setTimeout("drawRect(y,'orange')", 10);
ctx.rect(124, 50 + 50, 50, 40);
ctx.fillStyle = 'orange';
ctx.fill();
} else {
ctx.rect(124, 50, 50, canvas.height - 60);
ctx.fillStyle = 'lightgreen';
ctx.fill();
}
document.getElementById('batteryProzent').innerHTML = '> ' + prozent + ' %';
prozent++;
if (prozent % 4 == 0)
prozent++;
}
function init() {
ctx.rect(122, 40, 54, 100);
ctx.fillStyle = 'floralwhite';
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = '#303030';
ctx.stroke();
draw();
}
另一个不错的问题:如果我使用这个html页面作为第一页开始在Phonegap代码中,没有问题.但如果我在整个App中使用它,我就会遇到问题.出于这个原因,我也发布了我的第一页:
<!DOCTYPE html>
<html>
<head>
<title> BLE App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="Logo.png" />
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css"/>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
.ui-page { background: black;}
</style>
</head>
<body>
<div data-role="page" id="mainPage" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="a">
<h1> BLE</h1>
</div><!-- /header -->
<div data-role="content">
<!-- <p> BLE Test App</p> -->
<label for="mainPage_textFrage">Find BLE Devices:</label>
<!-- <input type="text" id="mainPage_textFrage" value="" placeholder="Ihre Frage"/> -->
<a data-role=button id="mainPage_showAnswerButton">Search</a>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="home.html" data-icon="home">Connect</a></li>
<li><a href="carView.html" data-icon="gear">Cars</a></li>
<li><a href="infoView.html" data-icon="info">Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<script>
$('#mainPage_showAnswerButton').on('click',function(){
$.mobile.changePage("searchResult.html", { transition: "slideup"});
console.log('click');
})
</script>
</body>
</html>
是否有人有同样的问题？有人可以帮忙吗？
谢谢到目前为止!
更新:我将JQuery更新为1.7.2,将JQuery Mobile更新为1.1.1.但仍然没有变化.动画无效.
小智 5
可能的方法:
从jquery-mobile-css中删除以下行消除了这个问题:
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
(删除"overflow-x:hidden"就足够了).
更好的解决方案是覆盖周围div元素的"overflow-x"属性(而不是canvas-element本身).
示例(用于电池状态):
<div data-role="content" align="center" data-theme="a" style="overflow-x: visible">
<canvas id="myBatteryCanvas" width="device-width" height="device-height">
Sorry, your browser doesn't support canvas technology
</canvas>
</div>
另请参阅http://code.google.com/p/android/issues/detail?id=35474
小智 0
当您从一个页面转换到另一页面时出现问题，但独立加载页面本身时却没有出现问题，听起来您需要在页面转换期间（卸载）加载内容。<div data-role="page">...</div>jQuery Mobile在页面转换中加载任何内容。这也意味着这些 div 之外的任何内容都会被忽略。不仅如此，上一页的 JavaScript 代码仍然延续到下一页。
<script>...</script>我看到2 个 HTML 页面底部的两个块，并且只有其中一个会加载，即您刷新的页面上的那个。确保通过将脚本插入 div 来加载这些data-role="page脚本
您应该更改以下内容
<script>$(document).ready(window.setTimeout("init()", 500));</script>
到
<script>$(document).on("pageshow",window.setTimeout("init()", 500));</script>
根据jQM 文档，您不应该使用$(document).ready(...)
| 归档时间： |
|
| 查看次数： |
1592 次 |
| 最近记录： |