在tab选项卡中使用索引列表，显示不正常，哪位大神遇到过或者知道这个问题，求指导~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link href="css/mui.indexedlist.css" rel="stylesheet" />
<style>
html,
body {
height: 100%;
overflow: hidden;
}
.mui-bar {
-webkit-box-shadow: none;
box-shadow: none;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">indexed list（索引列表）</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar-jc">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">决策</span>
</a>
<a class="mui-tab-item" href="#tabbar-db">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">待办</span>
</a>
<a class="mui-tab-item" href="#tabbar-cx">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">查询</span>
</a>
<a class="mui-tab-item" href="#tabbar-txl">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="#tabbar-sz">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">我</span>
</a>
</nav>
<div class="mui-content">
<div id="tabbar-jc" class="mui-control-content">
<h1>this is tab-jc</h1>
</div>
<div id="tabbar-db" class="mui-control-content">
<h4>this is tab-db</h4>
</div>
<div id="tabbar-cx" class="mui-control-content">
<h2>this is tab-cx</h2>
</div>
<div id="tabbar-txl" class="mui-control-content">
<div id='txl-list' class="mui-indexed-list">
<div class="mui-indexed-list-search mui-input-row mui-search">
<input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
</div>
<div class="mui-indexed-list-bar">
<a>A</a>
<a>B</a>
<a>C</a>
<a>D</a>
<a>E</a>
<a>F</a>
<a>G</a>
<a>H</a>
<a>I</a>
<a>J</a>
<a>K</a>
<a>L</a>
<a>M</a>
<a>N</a>
<a>O</a>
<a>P</a>
<a>Q</a>
<a>R</a>
<a>S</a>
<a>T</a>
<a>U</a>
<a>V</a>
<a>W</a>
<a>X</a>
<a>Y</a>
<a>Z</a>
</div>
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
<li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item">阿拉山口机场</li>
<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
<li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item">保山机场</li>
<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
<li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item">长白山机场</li>
<li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-indexed-list-item">长春龙嘉国际机场</li>
<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
<li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed-list-item">大理机场</li>
<li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-indexed-list-item">大连周水子国际机场</li>
<li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-indexed-list-item">敦煌机场</li>
<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
<li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item">鄂尔多斯机场</li>
<li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item">二连浩特赛乌苏国际机场</li>
<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
<li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item">阜阳西关机场</li>
<li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-indexed-list-item">福州长乐国际机场</li>
<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
<li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-indexed-list-item">赣州黄金机场</li>
<li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item">贵阳龙洞堡国际机场</li>
<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
<li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item">哈尔滨太平国际机场</li>
<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
<li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item">济南遥墙国际机场</li>
<li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-indexed-list-item">济宁曲阜机场</li>
<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
<li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-indexed-list-item">喀什机场</li>
<li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-indexed-list-item">克拉玛依机场</li>
<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
<li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-indexed-list-item">拉萨贡嘎机场</li>
<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
<li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-indexed-list-item">满洲里西郊机场</li>
<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
<li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item">南昌昌北国际机场</li>
<li data-value="NAO" data-tags="NanChongGaoPing" class="mui-table-view-cell mui-indexed-list-item">南充高坪机场</li>
<li data-value="NGB" data-tags="NingBoLiSheGuoJi" class="mui-table-view-cell mui-indexed-list-item">宁波栎社国际机场</li>
<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
<li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item">普洱思茅机场</li>
<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
<li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-indexed-list-item">齐齐哈尔三家子机场</li>
<li data-value="SHP" data-tags="QinHuangDaoShanHaiGuan" class="mui-table-view-cell mui-indexed-list-item">秦皇岛山海关机场</li>
<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
<li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item">日喀则和平机场</li>
<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
<li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item">三亚凤凰国际机场</li>
<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
<li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-indexed-list-item">塔城机场</li>
<li data-value="TYN" data-tags="TaiYuanWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item">太原武宿国际机场</li>
<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
<li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-indexed-list-item">万州五桥机场</li>
<li data-value="WEF" data-tags="WeiFang" class="mui-table-view-cell mui-indexed-list-item">潍坊机场</li>
<li data-value="HLH" data-tags="WuLanHaoTe" class="mui-table-view-cell mui-indexed-list-item">乌兰浩特机场</li>
<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
<li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item">西安咸阳国际机场</li>
<li data-value="ACX" data-tags="XingYi" class="mui-table-view-cell mui-indexed-list-item">兴义机场</li>
<li data-value="XUZ" data-tags="XuZhouGuanYin" class="mui-table-view-cell mui-indexed-list-item">徐州观音机场</li>
<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
<li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item">延安二十里堡机场</li>
<li data-value="YNZ" data-tags="YanCheng" class="mui-table-view-cell mui-indexed-list-item">盐城机场</li>
<li data-value="INC" data-tags="YinChuanHeDong" class="mui-table-view-cell mui-indexed-list-item">银川河东机场</li>
<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
<li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-indexed-list-item">湛江机场</li>
</ul>
</div>
</div>
</div>
<div id="tabbar-sz" class="mui-control-content">
<h5>this is tab-sz</h5>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.indexedlist.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.ready(function() {
var header = document.querySelector('header.mui-bar');
var list = document.getElementById('txl-list');
//calc hieght
list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
// list.style.height ='500px';
//create
window.indexedList = new mui.IndexedList(list);
});
</script>
</body>
</html>
4***@qq.com
这位同志，能否深入讲解一下？.mui-control-content？我搜索整个界面都不知道这个类在哪
2017-05-05 21:24