底部tabbar的标签页嵌套一个顶部tabbar后，顶部tabbar不能切换，内容不能显示，该如何解决，谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<link rel="icon" href="http://photo.test:5000/static/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="http://photo.test:5000/static/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="http://photo.test:5000/static/plugins/mui-3.7.2/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="http://photo.test:5000/static/plugins/mui-3.7.2/css/mui-icons-extra.css">
<style>
p img {
max-width: 100% !important;
height: auto !important;
}
</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">aaa</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#info">
<span class="mui-icon mui-icon-info"></span>
<span class="mui-tab-label">信息</span>
</a>
<a class="mui-tab-item" href="#select">
<span class="mui-icon mui-icon-compose"></span>
<span class="mui-tab-label">选择</span>
</a>
</nav>
<div class="mui-content">
<div id="info" class="mui-control-content mui-active">
<div class="mui-card">
<div class="mui-card-content">
<img src="http://photo.test:5000/image/2018-11-02-14-08-37_aGcG487SdvWFUQ3ddtZvFP.jpeg" alt="" width="100%">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="">类别<span class="mui-pull-right">test</span></a>
</li>
<li class="mui-table-view-cell">
<a class="">简介<span class="mui-pull-right">aaa</span></a>
</li>
</ul>
</div>
</div>
</div>
<div id="select" class="mui-control-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">待办公文</a>
<a class="mui-control-item" href="#item2mobile">已办公文</a>
<a class="mui-control-item" href="#item3mobile">全部公文</a>
</div>
<div class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-active">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
123123123
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
44444444444444444
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="http://photo.test:5000/static/plugins/requirejs-2.3.5/require.min.js"></script>
<script>
require(['jquery', 'mui'], function($, mui){
mui.init({
swipeBack: true //启用右滑关闭功能
});
(function ($) {
$('.mui-scroll-wrapper').scroll({
indicators: true // 是否显示滚动条
});
})(mui);
});
</script>
</html>
0 个回复