【发布时间】：2011-07-22 04:30:50
【问题描述】：
在我的应用程序中，我有一个返回结果列表的搜索引擎。每次用户单击指向那里的链接时，单个结果的页面都会填充数据。在此页面上，还有用于切换当前可见内容的按钮。问题是这部分应用程序失去了滚动的能力。我检查了“scrollstart”事件的调用，但没有调用。我正在使用最新的 Phonegap 和 jQuery Mobile。在模拟器和 ZTE Blade 上测试 Android 2.1。
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Search</title>
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css"/>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile.min.js"></script>
<style type="text/css">
p {
font-size: 11px;
}
.centered {
text-align:center;
}
.search-detail {
}
.header {
height:42px;
}
.ui-li-thumb {
height: 92px;
max-height: 92px;
max-width: 90px;
}
#single-top h4 {
margin-top:5px;
margin-bottom:5px;
}
.guziki .ui-btn {
margin-left:0;
}
#single-data {
margin-top:10px;
}
#single-data h4 {
margin-top:5px;
margin-bottom:5px;
}
#single-data h6 {
margin: 0;
}
</style>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header" data-position="fixed" class="header" id="my-header">
</div>
<div data-role="content">
<ul data-role="listview" role=listbox"" data-theme="c">
<li><a href="#page-5" class="single" data-transition="pop" name="0">Go !</a></li>
</ul>
</div>
<div data-role="footer">
footer
</div>
</div>
<!-- Start of fifth page -->
<div data-role="page" id="page-5" data-theme="a">
<div data-role="header" data-position="fixed" class="header" data-id="myheader">
<h1></h1>
</div>
<div data-role="content" class="single-content">
</div>
<div data-role="footer">
footer
</div>
</div>
<script type="text/javascript">
var searchObjects = [],
id;
var fixgeometry = function(){
scroll(0, 0);
var header = $("div[data-role='header']:visible");
var footer = $("div[data-role='footer']:visible");
var content = $("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}
}
obj = {'image': 'http://www.prologis.com/images/uploads/japanese-flag-640.jpg', 'name': 'ProLogis Park', 'developer': 'ProLogis',
'location': 'Suburbs', 'exact_location': 'New York',
'total_area': 71115, 'free_area': 3465, 'id': 2033, 'about': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non dui mollis libero dictum eleifend.'+
'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas' +
'Cras quam sem, pulvinar et luctus eu, tempor non metus. Cras mollis lacinia massa sed sagittis.'};
searchObjects.push(obj);
$("#page-5").live('pagebeforehide', function(){
var content = $(".single-content");
$('.container').remove();
});
$("#page-5").live('pageshow', function(){
fixgeometry();
});
$('.single').live('click', function(){
id = $(this).attr('name'),
content = $(".single-content");
var object = searchObjects[id];
var html = '<div class="container">'+
'<div id="single-top">'+
'<h4></h4>'+
'<div data-inline="true" class="guziki" data-theme="c">'+
'<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="main_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">About</span></span></a>'+
'<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="localization_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Localization</span></span></a>'+
'<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="gallery_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Gallery</span></span></a>'+
'</div>'+
'</div>'+
'<div id="single-data"></div>'+
'</div>';
content.append(html);
$('a[name|="main_data"]').live('click', load_main_data);
$("a[name|='localization_data']").live('click', load_localization_data);
$("a[name|='gallery_data']").live('click', load_gallery_data);
$('#single-top h4').html(object.name);
load_main_data();
fixgeometry();
});
var load_main_data = function(){
$('#single-data').empty();
var object = searchObjects[id];
$('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
$('#single-data').append('<h4>Developer:</h4>');
$('#single-data').append('<h6>'+ object.developer +'</h6>');
$('#single-data').append('<h4>About:</h4>');
$('#single-data').append('<p>'+ object.about +'< br/><br /></p>');
$('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
$('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
}
var load_localization_data = function(id){
$('#single-data').empty();
var object = searchObjects[id];
$('#single-data').append('<h4>Localization:</h4>');
}
var load_gallery_data = function(id){
$('#single-data').empty();
var object = searchObjects[id];
$('#single-data').append('<h4>Gallery:</h4>');
}
</script>
</body>
</html>
顺便问一下，有人知道为什么这个应用程序这么慢吗？我在编译期间做错了吗（我正在使用 phonegap 网站上的教程，并非所有使用的功能都从清单中删除）？
【问题讨论】：
-
奇怪的是滚动条只出现在页脚和页眉之间的空间中
-
好的，设置滚动：为 .single-content div 滚动会产生一些有希望的结果。
标签： jquery android scroll cordova jquery-mobile