APICloud成长记录二页面框架搭建

最新推荐文章于 2019-08-20 09:19:57 发布

流浪蓝

最新推荐文章于 2019-08-20 09:19:57 发布

阅读量649

点赞数

分类专栏： APICloud混合式移动开发文章标签： APICloud混合式移动开发

本文链接：https://blog.csdn.net/qq_35932345/article/details/52311521

版权

APICloud混合式移动开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
    	html,body{
    		height:100%;
    	}
    	body{
    		display:-webkit-box;
    		display:-webkit-flex;
    		-webkit-box-orient : vertical;/*纵向布局*/
    		-webkit-flex-flow : column;
    		flex-flow : column;
    	}
    	
    	.header{
    		width:100%;
    		height :50px;//让其高度占满50像素，
    		background-color:#3DEE11;
    	}
    	.place-holder{/*中间给其占满空间，使用盒子弹性布局*/
    		width:100%;
    		-webkit-box-flex: 1;
    		-webkit-flex:1;
    		flex:1;
    		background-color:#3352CC;
    	}
    	/*给页脚盒子布局*/
    	.footer{
    		display:-webkit-box;
    		display:-webkit-flex;
    		-webkit-box-orient : horizontal;/*横向布局*/
    		-webkit-flex-flow : row;
    		flex-flow : row;
    		width:100%;	
	    	height :60px;
	    	background-color:red;
    	}
    	.footer .menu{
    		box-sizing:border-box;
    		padding-top:42px;
    		padding-bottom:5px;
    		-webkit-box-flex: 1;
    		-webkit-flex:1;
    		flex:1;
    		height:60px;
    		text-align:center;
    		font-size:13px;
    		
    		background-size:30px 30px;
    		background-position:center 6px;
    		background-repeat:no-repeat;
    		}
    		//此是实现footer底部图标切换
    		.footer .home{
    			background-image :url(../image/footer/home.png);
    		}
    		.footer .home.active{
    			background-image :url(../image/footer/home_act.png);
    		}
    		.footer .groupbuy{
    			background-image :url(../image/footer/groupbuy.png);
    		}
    		.footer .groupbuy.active{
    			background-image :url(../image/footer/groupbuy_act.png);
    		}
    		.footer .find{
    			background-image :url(../image/footer/find.png);
    		}
    		.footer .find.active{
    			background-image :url(../image/footer/find_act.png);
    		}
    		.footer .my{
    			background-image :url(../image/footer/my.png);
    		}
    		.footer .my.active{
    			background-image :url(../image/footer/my_act.png);
    		}
    		
    		.header{//头部使用盒子布局
    			display:-webkit-box;
    			display:-webkit-flex;
    			display:flex;
    			-webkit-box-orient: horizontal;
    			-webkit-flex-flow:row;
    			flex-flow:row;
    		}
    	/*	.header .left{
    			width:90px;
    			height:60px;
    			background-color:#fa0;
    		}
    		.header .center{
    		-webkit-box-flex: 1;
    		-webkit-flex:1;
    		flex:1;
    		height:50px;
    		background-color:#0fa;
    		}
    		.header .center .search-bar{
    			margin-top:7px;
    			width:100%;
    			height:36px;
    			background-color:#fa6604;
    			background-clip:padding-box;
    			border-radius: 18px;
    		}
    		.header .right{
    			width:60px;
    			height:50px;
    			background-color:#a0f;
    		}*/
    		
    </style>
</head>
<body>
	<header id="header" class="header">
		<!--<div class="left"></div>
		<div class="center">
		<div class="search-bar"></div>
		</div>
		<div class="right"></div>-->	
	</header>
	<div class="place-holder"></div>
	<footer id="footer" class="footer">
		<div class="menu home active" οnclick="showContent(0)">首页</div>
		<div class="menu groupbuy" οnclick="showContent(1)">团购</div>
		<div class="menu find" οnclick="showContent(2)">发现</div>
		<div class="menu my" οnclick="showContent(3)">我的</div>
	
	</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	apiready = function(){
			init();
			showContent(0);
	};
	
	var menus,headerHeight,footerHeight;
	function init(){//布局基本设置
		var header = $api.byId('header');
			footer = $api.byId('footer');
			$api.fixIos7Bar(header);
			headerHeight = $api.offset(header).h;//页眉高度
			footerHeight = $api.offset(footer).h;//页脚高度
			menus = $api.domAll(footer, '.menu');
		}
	
	var frameNames = ['home_frame','groupbuy_frame','find_frame','my_frame'];
	//点击团购
	function showContent(index){
		for(var i = 0;i<menus.length;i++){
		if(index == i ){//当index等于i时将元素添加上去
			$api.addCls(menus[i], 'active');
			
			var y = 3 ==i?0 : headerHeight;	//针对我的页面置顶需求,进行判断
			//通过数组来循环操作
			api.openFrame({
	        name: 'content_frame_'+ i,
	        url: 'content_frame.html',
	        rect: {
		        x:0,
		        y:y,
		        w:api.winWidth,
		        h:api.winHeight - y - footerHeight
	        },
	        pageParam:{	//可以带参数过去
	        	name: frameNames[i],
		        }
	        });
		}else{
			$api.removeCls(menus[i], 'active');//当点击其他按钮时，需要将其rm

		api.setFrameAttr({
	        name: 'content_frame_' + i,//隐藏背景色
	        hidden :true
        });
		
		}
	}
	};
		</script>
</html>

今天根据官方的文档写了一个页面的原型布局,一来是为了自己以后更好的查看,二来希望与更多的朋友一起交流学习，废话不多说,直接上代码吧，

content_frame.html页面内容：此页面只是给其弹出他们在每个页面的名字

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
    	body{
    		
    	}
    </style>
</head>
<body>
	<div id="name"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
	apiready = function(){
		$api.byId('name').innerHTML = JSON.stringify(api.pageParam);
	};
</script>
</html>

今天的内容就这些了，希望对大家能用的上！