用底部导航，上面有间隙，求大神解答

ForDream安筱雨 · 发表于：2016-04-28 18:01:01

header背景为绿色，进去前绿色不会出来，只有li的红色，过两秒就出现了绿色
api.openFrameGroup({
         name: 'group',
         scrollEnabled: false,
         rect: {
            x: 0,
            y: $api.dom('header').offsetHeight,
            w: api.winWidth,
            h: $api.dom('#main').offsetHeight
         },
可能是上面的问题怎么改都不对。
在浏览器中显示正常

header{ background-color: green;overflow: hidden;padding-top:0px;}
      header ul li { margin-top:0px;height: 50px; line-height: 50px; text-align: center; display: block; color: #323237; position: relative;font-size: 18px; background:red; }
      header ul li.active{ display: block; }
      #footer{  background-color: #f2f2f2; }
      #footer ul li{ background-size: auto 30px; text-align: center; }
      #footer ul li.active{ color: green; }
   .flex-wrap ul{
            background: #50BDFB;
            color: #ffffff;
   }
      #footer .flex-wrap li {padding:0px !important;height:65px}
      #footer .flex-wrap li i{
         font-size:25px;
         display:block;
         padding:0px !important;
      }
</style>
</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical">
<header>
      <ul>
         <li class="border-b active" >附近</li>
         <li class="border-b" >消息</li>
         <li class="border-b" >通讯录</li>
         <li class="border-b" >我</li>
      </ul>
</header>
<div id="main" class="flex-con">

</div>
<div id="footer" class="border-t">
      <ul class="flex-wrap" >
         <li tapmode="hover" class="flex-con active" ><i class="aui-iconfont aui-icon-location"></i>附近</li>
         <li tapmode="hover" class="flex-con" ><i class="aui-iconfont aui-icon-message"></i>消息</li>
         <li tapmode="hover" class="flex-con" ><i class="aui-iconfont aui-icon-friend"></i>通讯录</li>
         <li tapmode="hover" class="flex-con" ><i class="aui-iconfont aui-icon-favor"></i>我</li>
      </ul>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript">
  // 解决状态栏重合，并优化fixStatusBar代码,Android4.4版本以上添加25px
apiready = function () {
      $api.fixStatusBar( $api.dom('header') );
      api.setStatusBarStyle({
         style: 'dark',
         color: '#6ab494'
      });
      funIniGroup();
      }
function funIniGroup(){
      var eHeaderLis = $api.domAll('header li'),
         frames = [];
      for (var i = 0,len = eHeaderLis.length; i < len; i++) {
            frames.push( {
                  name: 'frame'+i,
                  url: './html/frame'+i+'.html',
                  bgColor : 'rgba(0,0,0,.2)',
                  bounces:true
            } )
      }
      api.openFrameGroup({
         name: 'group',
         scrollEnabled: false,
         rect: {
            x: 0,
            y: $api.dom('header').offsetHeight,
            w: api.winWidth,
            h: $api.dom('#main').offsetHeight
         },
         index: 0,
         frames:[
            {
            name:'frame0',
            url:'./html/frame0.html'
         },
         {
            name:'frame1',
            url:'./html/frame1.html'
         },
         {
            name:'frame2',
            url:'./html/frame2.html'
         },
         {
            name:'frame3',
            url:'./html/frame3.html'
         }
         ]
      }, function (ret, err) {

      });
   }


// 随意切换按钮
function randomSwitchBtn( tag ) {
      if( tag == $api.dom('#footer li.active') )return;
      var eFootLis = $api.domAll('#footer li'),
         eHeaderLis = $api.domAll('header li'),
         index = 0;
      for (var i = 0,len = eFootLis.length; i < len; i++) {
         if( tag == eFootLis[i] ){
            index = i;
         }else{
            $api.removeCls(eFootLis[i], 'active');
            $api.removeCls(eHeaderLis[i], 'active');
         }
      }
      $api.addCls( eFootLis[index], 'active');
      $api.addCls( eHeaderLis[index], 'active');
      api.setFrameGroupIndex({
         name: 'group',
         index: index
      });
}

</script>

浪费

很明显是 $api.fixStatusBar 的问题，你的 config 已经禁止了沉浸吧？

ForDream安筱雨

浪费发表于 2016-4-28 18:54
很明显是 $api.fixStatusBar 的问题，你的 config 已经禁止了沉浸吧？

虽然不知道config沉浸是什么问题，但是我在官网文档上看到了
var header = document.querySelector('#header');
$api.fixStatusBar(header);
把自动生成的那几行去掉，加上这个就好了，非常谢谢你，解决了我两个问题。
再次感谢

用底部导航，上面有间隙，求大神解答 [复制链接]