我需要帮助在jQuery Mobile和PhoneGap中使用scrowview创建列表。我正在使用iscrollview并尝试采取措施来调整我的应用程序。在scrollview附带的示例中,使用带有data-iscroll和list(ol)的div,仅使用此页面。 我想在没有滚动的情况下获得另一个列表后,在body中放入一个date-iscroll div和div中的一个列表。但是,这个没有正确回答的卷轴会被“卡住”在一个位置。 这是我的代码:
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
charset="utf-8" />
<!--- STYLE --->
<link rel="stylesheet"
href="style/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="style/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="style/jquery.mobile.iscrollview-pull.css" />
<link rel="stylesheet" href="style/smart_mobile_theme.css" />
<!--- JS --->
<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="js/cordova-2.2.0.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a">
<div data-role="header" data-theme="a" data-position="fixed"
data-tap-toggle="false">
</div>
<div class="content">
<div id="listFilter"
style="width: 100%; margin-top: 10%; padding: 5px; margin-bottom: 5%"
data-iscroll class="iscroll-wrapper">
<div class="iscroll-scroller">
<div class="iscroll-content">
<ul id="listVeiculos" data-role="listview" data-theme="d"
data-filter-placeholder="Vehicle" data-filter="true"
data-divider-theme="d">
<li data-role="list-divider">
<div class="ui-grid-c">
<div class="ui-block-a">aaaa</div>
<div class="ui-block-b">bbbb</div>
<div class="ui-block-c">cccc</div>
<div class="ui-block-d">dddd</div>
</div>
</li>
<!-- VISUAL TEST -->
<li>
<div class="ui-grid-c">
<div class="ui-block-a">Frota 001</div>
<div class="ui-block-b">ABC 0123</div>
<div class="ui-block-c">R124</div>
<div class="ui-block-d">SCANNIA</div>
</div>
</li>
<li>
<div class="ui-grid-c">
<div class="ui-block-a">Frota 002</div>
<div class="ui-block-b">DEF 4567</div>
<div class="ui-block-c">FH12</div>
<div class="ui-block-d">VOLVO</div>
</div>
</li>
<li>
<div class="ui-grid-c">
<div class="ui-block-a">Frota 003</div>
<div class="ui-block-b">GHI 8901</div>
<div class="ui-block-c">1113</div>
<div class="ui-block-d">MERCEDES-BENZ</div>
</div>
</li>
<li>
<div class="ui-grid-c">
<div class="ui-block-a">Frota 004</div>
<div class="ui-block-b">JKL 2345</div>
<div class="ui-block-c">CARGO</div>
<div class="ui-block-d">FORD</div>
</div>
</li>
<!-- TESTE SCROLL -->
<li>
<div class="ui-grid-d">
<div class="ui-block-a">Frota 005</div>
<div class="ui-block-b">MNO 2222</div>
<div class="ui-block-c">CARGO</div>
<div class="ui-block-d">FORD</div>
</div>
</li>
<li>
<div class="ui-grid-e">
<div class="ui-block-a">Frota 006</div>
<div class="ui-block-b">MNO 3333</div>
<div class="ui-block-c">TEST</div>
<div class="ui-block-d">TEST</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content_div" style="margin-top: 5%;" data-position="fixed"
data-tap-toggle="false">
<div id="listActions">
<ul data-role="listview" data-inset="true"
style="margin-top: 5%; border: 0px" data-theme="d"
data-dividertheme="d">
<li data-role="list-divider">1-xxxxxx</li>
<li data-role="text">2-xxxxxx</li>
<li data-role="text">3-xxxxxx</li>
<li data-role="text">4-xxxxxx</li>
<li data-role="text">5-xxxxxx</li>
<li data-role="text">6-xxxxxx</li>
<li data-role="text">7-xxxxxx</li>
</ul>
</div>
</div>
</div>
</body>
</html>
甚至我的列表也必须有一个过滤器。通过添加此过滤器,通过关注搜索框,listAction(具有滚动的列表后面的列表)位于列表上并滚动并过滤它,因为data-position =“fixed”date-tap-toggle =“假”。
谢谢!