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>
blanc.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>
show_frame.html

 

posted @ 2018-03-05 04:46  鬼小妞  阅读(2417)  评论(3编辑  收藏  举报