apicloud 如何让底部导航栏与虚拟按键适配
问题描述：虚拟按键划上去时，底部导航内容显示不全。虚拟按键隐藏时，底部导航上方有白条。
关键点：
1.main高=win高-footer-header;
2.openframe方法中的rect属性的【marginBottom: footer高】,【h: 'auto'】
窗口win:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/> 6 <title>个人信息</title> 7 </head> 8 <style> 9 *{margin: 0;padding: 0;} 10 body,html{ 11 height: 100%; 12 } 13 #wrap{ 14 height: 100%; 15 /*流式布局*/ 16 display: -webkit-box; 17 display: -webkit-flex; 18 display: flex; 19 /*垂直布局*/ 20 -webkit-box-orient: vertical; 21 -webkit-flex-flow: column; 22 flex-flow: column; 23 } 24 #main{ 25 /*main的高度是：父高度-底高-头高；*/ 26 -webkit-box-flex: 1; -webkit-flex: 1; flex:1; 27 } 28 #Header{ 29 height: 3em; 30 background-color: rgba(0,162,255,1); 31 } 32 #Footer{ 33 height: 3em; 34 background-color:rgba(0,162,255,1); 35 } 36 </style> 37 <body> 38 <div id="wrap"> 39 <header id="Header">头部导航</header> 40 <div id="main"></div> 41 <footer id="Footer">底部导航</footer> 42 </div> 43 </body> 44 <script type="text/javascript" src="../script/api.js"></script> 45 <script type="text/javascript"> 46 // 完成首页初始化 47 var Header = $api.byId('Header'); 48 var Footer = $api.byId('Footer'); 49 var FooterOffset=$api.offset(Footer); 50 apiready = function() { 51 C_initheaderindeed(Header); 52 openframe(); 53 }; 54 55 function C_initheaderindeed(header){ 56 $api.fixIos7Bar(header); 57 $api.fixStatusBar(header); 58 function AndroidHeight(){ 59 var $Header = $api.dom('header'); 60 if(parseFloat(api.systemVersion)>=4.4){ 61 $api.css($Header,'padding-top:20px'); 62 return $api.offset($Header).h; 63 }else{ 64 return $api.offset($Header).h; 65 } 66 } 67 } 68 69 function openframe(){ 70 var HeaderOffset=$api.offset(Header); 71 api.openFrame({ 72 name: 'show_frame', 73 url: './show_frame.html', 74 rect: { 75 x: 0, 76 y: HeaderOffset.h, 77 w: api.winWidth, 78 h: 'auto', 79 marginLeft:0, //相对父 window 左外边距的距离 80 marginTop:0, //相对父 window 上外边距的距离 81 marginBottom:FooterOffset.h, //相对父 window 下外边距的距离 82 marginRight:0 //相对父 window 右外边距的距离 83 }, 84 bounces: false, 85 bgColor: 'rgba(0,0,0,0)' 86 }); 87 } 88 89 90 </script> 91 </html>
内容frame:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/> 6 <title>个人信息</title> 7 <meta content="telephone=no" name="format-detection" /> 8 </head> 9 <style> 10 body{ 11 width: 100%; 12 /*background:url(../image/third_frame/bodybgimg.jpg) no-repeat;*/ 13 background-size:cover; 14 height:auto!important; 15 margin: 0; 16 padding: 0; 17 background-color: #f2f2f2; 18 } 19 *{margin: 0;padding: 0;} 20 #wrap{ 21 width: auto; 22 height:50em; 23 background-color: red; 24 display: -webkit-box; 25 display: -webkit-flex; 26 display: flex; 27 -webkit-box-orient: vertical; 28 -webkit-flex-flow: column; 29 flex-flow: column; 30 } 31 32 33 </style> 34 <body> 35 <div id="wrap"> 36 </div> 37 </body> 38 <script type="text/javascript" src="../script/api.js"></script> 39 <script type="text/javascript"> 40 // 完成首页初始化 41 42 apiready = function () { 43 44 } 45 46 </script> 47 </html>
