在一个页面用了两个tab bar，外一层是顶部tab bar，第一个item又包含一个左侧tab bar；但是顶部tab bar 在点击第二、第三项时，经常没反应，点击很多下才偶尔会起作用，有没有遇到过的，帮忙解释下。
lsjz
- 发布：2016-07-13 09:47
- 更新：2016-07-13 10:24
- 阅读：1259
一个页面用到两层选项卡tab bar 外一层的tab bar 点击事件概率性生效
分类：MUI
lsjz (作者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.mui-row.mui-fullscreen>[class*="mui-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-control-content {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
background-color: #fff;
}
</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">页面</h1>
</header>
<div class="mui-content mui-row mui-fullscreen" style=" overflow: hidden;">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active top-control-item" href="#item1">顶部1</a>
<a class="mui-control-item" href="#item2">顶部2</a>
<a class="mui-control-item" href="#item3">顶部3</a>
</div>
</div>
<div style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;">
<div id="item1" class="mui-control-content mui-active" style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;">
<div style=" width: 20%; position: relative; float: left;">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<a class="mui-control-item mui-active" href="#content1">左侧1</a>
<a class="mui-control-item" href="#content2">左侧2</a>
<a class="mui-control-item" href="#content3">左侧3</a>
<a class="mui-control-item" href="#content4">左侧4</a>
<a class="mui-control-item" href="#content5">左侧5</a>
<a class="mui-control-item" href="#content6">左侧6</a>
<a class="mui-control-item" href="#content7">左侧7</a>
<a class="mui-control-item" href="#content8">左侧8</a>
</div>
</div>
<div id="segmentedControlContents" style="border-left: 1px solid #c8c7cc; width: 75%; position: relative; float: left; padding-left: 10px;">
<div id="content1" class="mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第1个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content2" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第2个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content3" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第3个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第3个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content4" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第4个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第4个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content5" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第5个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第5个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content6" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第6个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第6个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content7" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第7个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第7个选项卡子项-'2 '</li>
</ul>
</div>
<div id="content8" class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第8个选项卡子项-'1 '</li>
<li class="mui-table-view-cell">第8个选项卡子项-'2 '</li>
</ul>
</div>
</div>
</div>
<div id="item2" class="mui-control-content" style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;">
item2
</div>
<div id="item3" class="mui-control-content" style="position: absolute;top: 60px;bottom: 0;left: 0;right: 0;">
item3
</div>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
</script>
</body>
</html>