主页代码 list_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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'50px'//默认为0px，可不定义；
}
}]
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">标题</h1>
</header>
</body>
<footer class="mui-bar mui-bar-tab">
<a class="mui-tab-item" >
<span class="mui-icon mui-icon-arrowthinleft" id="info"></span>
<span class="mui-tab-label">主页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-weixin"></span>
<span class="mui-tab-label">微聊</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-tuijian"></span>
<span class="mui-tab-label">推荐</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon iconfont icon-fenxiang"></span>
<span class="mui-tab-label">分享</span>
</a>
</footer> </html>
子页面list.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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
list2
</body>
</html>
跳转页面代码 list2代码
<!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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
list2
</body>
</html>
0 个回复