【发布时间】：2016-02-17 05:43:46
【问题描述】：
我对 apache cordova 有一个重大问题。这是 iOS 特有的问题。我正在使用 jQuery-mobile。每当在 listview 控件上进行搜索然后我的固定位置页眉、页脚和搜索输入向下移动时，就会出现此问题。
这是我页面的标记。
<!DOCTYPE HTML>
<html>
<head>
<title>Contacts</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="css/jquery-ui.min.css" rel="stylesheet" />
</head>
<body>
<style>
#my-wrapper
{
padding-top: 81px;
background-color: rgb(250, 246, 246);
}
#my-wrapper form {
position: fixed;
left: 2%;
right :2%;
top: 35px;
width: 96%;
z-index: 2;
background-color: rgb(250, 246, 246);
border-color : rgb(120, 120, 120);
text-shadow:unset;
box-shadow:unset;
}
#ContactHeader
{
position: fixed;
top: 0px;
width: 100%;
z-index: 1;
}
</style>
<div id="employeeListPage" data-role="page" >
<div id="ContactHeader" data-role="header" style="height:32px ; ">
<a class="ui-btn-left" data-icon="arrow-l" href="#" onclick="window.location.replace('index.html');" style="vertical-align:text-top; height:8px"></a>
<h2>Contacts</h2>
</div>
<div id="my-wrapper" data-role="main">
<ul id="employeeList" data-role="listview" data-inset="true" data-filter="true" data-filter-theme="staticscroll" data-filter-placeholder="Search Contacts/Companies" ></ul>
</div>
<div data-role="footer" style="text-align:center; width: 100%;height: 25px;position:fixed;bottom: 0px;left: 0px;right: 0px;">My footer</div>
<div id="loadmoreajaxloader" style="display:none;"><center><img src="css/images/bw-loader.GIF" /></center></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/contactlist.js"></script>
</body>
</html>
我还有一个在用户开始在搜索栏中输入时触发的事件
$(document).on("pagecreate", "#employeeListPage", function () {
$("#employeeList").on("filterablebeforefilter", function (e, data) {
var URL = window.localStorage.getItem("ContactsForSearch");
URL = URL + '/' + nextNo + '/' + value;
$.getJSON(URL, function (info) {
if (info.length === 0) {
nomoredata = true;
//alert('no more data to display');
$('#employeeList').append('<br>');
$('#employeeList').append('<center><h2>No Data <h2> </center>');
}
else {
$('#employeeList').append('<li style="border-top: 1px solid #0189D0;"><a data-transition="slide" href="employeedetails.html?id=' + id + '&comnum=' + comNum + '&contactNum=' + contactNumber + '"><h2>' + companyName + '</h2> <small>' + name + ' - ' + designation + '</small>' + '</a>' + '</li>');
}
});
});
});
无论何时从列表顶部搜索：
如果您向下滚动并开始在搜索栏中输入，则会发生这种情况...这些屏幕截图来自 xcode 的模拟器，在手机上它具有相同的结果，只是底部弹出了一个键盘：
【问题讨论】：
-
我也有同样的问题
标签： ios cordova jquery-mobile-listview