39,084
社区成员
发帖
与我相关
我的任务
分享新人，不晓得改怎么取标题，html5 app开发的问题
最近用html5,js,jQuery,Echarts编写 的程序打包成Android上运行的.apk文件遇到了在中兴手机(系统Android4.2)出现仪表盘有两根指针,而华为虽然只有一根指针但是出现了滑动切换时的卡顿现象.但是小米2s几乎完美运行(兼容性,流畅度), 求大神帮忙看看是什么问题, 及改进办法
...全文
请发表友善的回复…
发表回复
wswzwz 2015-01-09
- 打赏
- 举报
现在只有android4.2显示不正常，4.0,4.1,4.4都是显示正常的
xue1bao 2015-01-09
- 打赏
- 举报
我代楼主贴上主要代码:麻烦帮忙看一下,非常感谢!
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<title>院长驾驶舱</title>
<link rel="stylesheet" type="text/css" href="css/slider/slider-pro.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/table.css" media="screen" />
<script src="js/echarts-2.1.10/js/echarts.js"></script>
<script type="text/javascript" src="js/slider/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.sliderPro.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('#example1').sliderPro({
width: 345,
height: 520,
arrows: false,
buttons: false,
waitForLayers: true,
thumbnailWidth: 200,//原始为200
thumbnailHeight: 100,//原始为100
thumbnailPointer: true,
autoplay: false,
autoScaleLayers: false,
breakpoints: {
500: {
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
});
</script>
<script>
window.onload = function() {
require.config({
paths: {
echarts: 'js/echarts-2.1.10/js'
}
});
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/gauge'
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
var myChart1 = ec.init(document.getElementById('main1'));
var myChart2 = ec.init(document.getElementById('main2'));
var myChart3 = ec.init(document.getElementById('main3'));
var myChart4 = ec.init(document.getElementById('tabbar'));
var myChart5 = ec.init(document.getElementById('tabbar2'));
var myChart6 = ec.init(document.getElementById('tabbar3'));
var myChart7 = ec.init(document.getElementById('main4'));
var myChart8 = ec.init(document.getElementById('main5'));
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getMzrc.action',
dataType: "json",
success: function(data) {
myChart.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getCyrs.action',
dataType: "json",
success: function(data) {
myChart1.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getZyts.action',
dataType: "json",
success: function(data) {
myChart2.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getCwzzcs_m.action',
dataType: "json",
success: function(data) {
myChart3.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getMzyrcfy.action',
dataType: "json",
success: function(data) {
myChart4.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getMzrc.action',
dataType: "json",
success: function(data) {
myChart5.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!test.action',
dataType: "json",
success: function(data) {
myChart6.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getTableInfo.action',
dataType: "json",
success: function(data) {
$("#tabbar4").html(data);
$("#datalist tr:even td").css("background-color","#ECF5FF");
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getYpf.action',
dataType: "json",
success: function(data) {
myChart7.setOption(eval('(' + data + ')'));
}
});
$.ajax({
url: 'http://192.168.1.167:8080/phoneserver/test!getSsf.action',
dataType: "json",
success: function(data) {
myChart8.setOption(eval('(' + data + ')'));
}
});
}
)
};
function back() {
window.history.go(-1);
}
</script>
</head>
<body height="100%">
<div id="header">
<img align="left" src="img/button/arrow.png" height="23px" width="14px" style="margin:2px 0px 0px 10px" onclick="back()"/>当日概况
</div><br/><br/><br/>
<div id="example1" class="slider-pro">
<div class="sp-slides" >
<div class="sp-slide">
<div id="common" class="class" style="height:600px;width:340px">
<table style="padding: 0px" id="tab">
<tr>
<td>
<div id="main" class="gauge">
</div>
</td>
<td>
<div id="main1" class="gauge">
</div>
</td>
</tr>
<tr>
<td>
<div id="main2" class="gauge">
</div>
</td>
<td>
<div id="main3" class="gauge">
</div>
</td>
</tr>
<tr>
<td>
<div id="main4" class="gauge">
</div>
</td>
<td>
<div id="main5" class="gauge">
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="sp-slide">
<div class="class" id="tabbar"></div>
</div>
<div class="sp-slide">
<div class="class" id="tabbar2"></div>
</div>
<div class="sp-slide">
<div class="class" id="tabbar3"></div>
</div>
<div class="sp-slide">
<div class="class" id="tabbar4"></div>
</div>
</div>
</div>
</body>
</html>
KK3K2005 2015-01-08
- 打赏
- 举报
渲染bug么
这个就看 对html的支持度了
业余草 2015-01-08
- 打赏
- 举报
这是兼容性问题。附上源码，查看具体导致的原因！！！
