mui怎样打开子页面

//主页:

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	</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>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				subpages:[{
					url:"sub3_PYQ_List.html",
					id:"sub3_PYQ_List.html",
					styles:{
						top:"45px",
						bottom:"0px"
					}
					
				}]
			})
		</script>
	</body>

</html>

子页面:

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		 
		  <div class="mui-scroll">
			  <!-- 图片轮播 -->
			  <div id="slider" class="mui-slider" >
			    <div class="mui-slider-group mui-slider-loop">
			  	<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
			  	<div class="mui-slider-item mui-slider-item-duplicate">
			  	  <a href="#">
			  		<img src="images/cbd.jpg">
			  	  </a>
			  	</div>
			  	<!-- 第一张 -->
			  	<div class="mui-slider-item">
			  	  <a href="#">
			  		<img src="images/muwu.jpg">
			  	  </a>
			  	</div>
			  	<!-- 第二张 -->
			  	<div class="mui-slider-item">
			  	  <a href="#">
			  		<img src="images/shuijiao.jpg">
			  	  </a>
			  	</div>
			  	<!-- 第三张 -->
			  	<div class="mui-slider-item">
			  	  <a href="#">
			  		<img src="images/yuantiao.jpg">
			  	  </a>
			  	</div>
			  	<!-- 第四张 -->
			  	<div class="mui-slider-item">
			  	  <a href="#">
			  		<img src="images/p1.jpg">
			  	  </a>
			  	</div>
			  	<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
			  	<div class="mui-slider-item mui-slider-item-duplicate">
			  	  <a href="#">
			  		<img src="images/p2.jpg">
			  	  </a>
			  	</div>
			    </div>
			    <div class="mui-slider-indicator">
			  	<div class="mui-indicator mui-active"></div>
			  	<div class="mui-indicator"></div>
			  	<div class="mui-indicator"></div>
			  	<div class="mui-indicator"></div>
			    </div>
			  </div>
			<!--数据列表-->
			 <ul class="mui-table-view">
			 	<li class="mui-table-view-cell mui-media">
			 		<a href="javascript:;">
			 			<img class="mui-media-object mui-pull-left" src="images/p4.jpg">
			 			<div class="mui-media-body">
			 				幸福
			 				<p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
			 			</div>
			 		</a>
			 	</li>
			 	<li class="mui-table-view-cell mui-media">
			 		<a href="javascript:;">
			 			<img class="mui-media-object mui-pull-left" src="images/p5.jpg">
			 			<div class="mui-media-body">
			 				木屋
			 				<p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>
			 			</div>
			 		</a>
			 	</li>
			 	<li class="mui-table-view-cell mui-media">
			 		<a href="javascript:;">
			 			<img class="mui-media-object mui-pull-left" src="images/p6.jpg">
			 			<div class="mui-media-body">
			 			    CBD
			 				<p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>
			 			</div>
			 		</a>
			 	</li>
			 </ul>
		  </div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh:{
					container:"#refreshContainer",
					down:{
						contentdown:"下拉可以刷新",
						contentover:"释放立即刷新",
						contentrefresh:"正在刷新",
						callback:pulldownRefresh
						
					},
					up:{
						callback:pullupRefresh
					}
				}
			});
			
			function    pulldownRefresh(){
				setTimeout(function(){
				 
				var    table=document.querySelector(".mui-table-view");
				for (var i = 0; i < 3; i++) {
					var   li=document.createElement("li");
					li.className="mui-table-view-cell  mui-media";
					var   str='';
					str+='<img class="mui-media-object mui-pull-left" src="images/p5.jpg">';
					str+='<div class="mui-media-body">';
						str+='木屋';
						str+='<p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>';
					str+='</div>';
					
					li.innerHTML=str;
					table.insertBefore(li,table.firstChild);
					}  
			   mui('#refreshContainer').pullRefresh().endPulldownToRefresh(); 
			    
			    },1500);
			}
			
			function    pullupRefresh(){
				setTimeout(function(){
				 
				var    table=document.querySelector(".mui-table-view");
				for (var i = 0; i < 3; i++) {
					var   li=document.createElement("li");
					li.className="mui-table-view-cell  mui-media";
					var   str='';
					str+='<img class="mui-media-object mui-pull-left" src="images/p5.jpg">';
					str+='<div class="mui-media-body">';
						str+='木屋';
						str+='<p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>';
					str+='</div>';
					
					li.innerHTML=str;
					table.appendChild(li);
					}  
			   mui('#refreshContainer').pullRefresh().endPullupToRefresh(); 
			    
			    },1500);
			}
		</script>
	</body>

</html>

//运行效果如图:

在这里插入图片描述

发布了72 篇原创文章 · 获赞 0 · 访问量 716
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览