问题描述:虚拟按键划上去时,底部导航内容显示不全。虚拟按键隐藏时,底部导航上方有白条。

关键点:

1.main高=win高-footer-header;

2.openframe方法中的rect属性的【marginBottom: footer高】,【h: 'auto'】

 apicloud 如何让底部导航栏与虚拟按键适配          apicloud 如何让底部导航栏与虚拟按键适配

 

 

窗口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 >
39             <header >头部导航</header>
40       <div ></div>
41       <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

相关文章: