首页 > 代码库 > 两个页面实现mui轮播图与选项卡结合
两个页面实现mui轮播图与选项卡结合
index.html页面
<!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="http://www.mamicode.com/css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="http://www.mamicode.com/css/iconfont.css"/>
<script src="http://www.mamicode.com/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<style>
.mui-card .mui-control-content {
padding: 10px;
}
.mui-control-content {
height: 150px;
}
</style>
<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">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="http://www.mamicode.com/#item1">已办公文</a>
<a class="mui-control-item" href="http://www.mamicode.com/#item2" id="it">全部公文</a>
</div>
</div>
<div>
<div class="mui-slider" id="item1">
<div class="mui-slider-group mui-slider-loop">
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/3.jpg" /></a></div>
<div class="mui-slider-item"><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/1.jpg" /></a></div>
<div class="mui-slider-item"><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/2.jpg" /></a></div>
<div class="mui-slider-item"><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/3.jpg" /></a></div>
<div class="mui-slider-item"><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/img/1.jpg" /></a></div>
<!--支持循环，需要重复图片节点-->
<div class="mui-slider-item mui-slider-item-duplicate"><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/1.jpg" /></a></div>
</div>
</div>
</div>
<script type="text/javascript">
mui.init();
var it=document.getElementById(‘it‘);
it.addEventListener(‘tap‘,function(){
mui.openWindow({url: ‘index2.html‘, id:‘index2.html‘});
})
</script>
</html>
index2.html页面
<!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="http://www.mamicode.com/css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="http://www.mamicode.com/css/iconfont.css"/>
<script src="http://www.mamicode.com/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<style>
.mui-card .mui-control-content {
padding: 10px;
}
.mui-control-content {
height: 150px;
}
</style>
<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">
<div style="padding: 10px 10px;">
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item " href="http://www.mamicode.com/#item1" id="it">已办公文</a>
<a class="mui-control-item mui-active" href="http://www.mamicode.com/#item2" >全部公文</a>
</div>
</div>
<div>
<div id="item2" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
mui.init();
var it=document.getElementById(‘it‘);
it.addEventListener(‘tap‘,function(){
mui.openWindow({url: ‘index.html‘, id:‘index.html‘});
})
</script>
</html>
效果图如下：
两个页面实现mui轮播图与选项卡结合