我试着在Android 4.1.2中用过滤器做一个简单的列表视图,它看起来破坏了固定的布局,比如页眉/页脚的固定位置,一旦你点击过滤器框,列表视图就不再适合屏幕了。
是错误还是我的代码出了问题。以下是简单的代码:
<ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
</ul>
屏幕截图:http://postimg.org/image/3xs0dqu7v/
尝试使用正确的html标记。演示http://jsfiddle.net/yeyene/AeXnV/8/
我想你忘了<div data-role="content">
?
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div>
<div data-role="content">
<ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</div>
感谢您的回复。我发现了问题。它是由页脚中的class="ui bar"引起的。如果我删除这个class="ui bar",它修复了右侧布局问题,但页眉和页脚不再固定。我把代码粘贴到这里,让你重现这个问题。问题出在PhoneGap,我不知道其他浏览器是否有问题。
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div>
<div data-role="content">
<ul id="mylist" data-role="listview" data-split-icon="delete" data-split-theme="b" data-filter="true">
<li data-role="list-divider">A</li>
<li><a href="index.html">Adam Kinkaid</a></li>
<li><a href="index.html">Alex Wickerham</a></li>
<li><a href="index.html">Avery Johnson</a></li>
<li data-role="list-divider">B</li>
<li><a href="index.html">Bob Cabot</a></li>
<li data-role="list-divider">C</li>
<li><a href="index.html">Caleb Booth</a></li>
<li><a href="index.html">Christopher Adams</a></li>
<li><a href="index.html">Culver James</a></li>
</ul>
</div>
<div data-role="footer" class="ui-bar" data-position="fixed">
<a href="javascript:void(0)" id="emailCode" data-role="button"
data-icon="star">Email</a>
</div>