apicloud3.0 header异常

龙毅257 · *发表于 2021-12-12 19:06:23*

怎么将header  li中的内容置于手机顶部，状态栏之下，为什么会被遮住，怎么改代码？请大佬指教。
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<style type="text/css">
html,
      body {
         height: 100%;
      }

      .wrap {
         display: -webkit-box;
         -webkit-box-orient: vertical;
         -webkit-flex-flow: column;
      }

      header {

         background-color: #099aee;
      }

      header ul li {
         height: 50px;
         line-height: 50px;
         text-align: center;
         display: none;
         color: #e7c504;
         position: relative;
         font-size: 24px;

      }

      header ul li.active {
         display: block;
      }

      .flex-1 {
         -webkit-box-flex: 1;
         -webkit-flex: 1;
      }

      .empty {
         text-align: center;
         padding: 120px 0;
      }

      #footer {
         background-color: #f3e414;
      }

      #footer ul li {
         padding-top: 36px;
         padding-bottom: 4px;
         background: url() no-repeat center 2px;
         background-size: auto 30px;
         text-align: center;

      }

      #footer ul li.active {
         color: #260eff;
      }

      #footer ul li:nth-child(1) {
         background-image: url(../image/bottombtn0101.png);
      }

      #footer ul li:nth-child(2) {
         background-image: url(../image/bottombtn0201.png);
      }

      #footer ul li:nth-child(3) {
         background-image: url(../image/bottombtn0301.png);
      }

      #footer ul li:nth-child(4) {
         background-image: url(../image/bottombtn0401.png);
      }

      #footer ul li:nth-child(1).active {
         background-image: url(../image/bottombtn0102.png);
      }

      #footer ul li:nth-child(2).active {
         background-image: url(../image/bottombtn0202.png);
      }

      #footer ul li:nth-child(3).active {
         background-image: url(../image/bottombtn0302.png);
      }

      #footer ul li:nth-child(4).active {
         background-image: url(../image/bottombtn0402.png);
      }

      .flex-con {
         overflow: auto;
      }
</style>
</head>

<body>
<div id="wrap" class="flex-wrap flex-vertical" style="margin-bottom: 40%;">
      <header style="margin-bottom: 40%;">
         <ul style="margin-bottom: 40%;">
            <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" onclick="randomSwitchBtn( this );" class="flex-con active">地图导航</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">共享单车</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">时空地图</li>
            <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con">个人中心</li>
         </ul>
      </div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
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: 'frame' + i + '.html',
            bgColor: 'rgba(0,0,0,.5)',
            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: frames
      }, 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
      });
}
api.openWin({
      name: 'frame0',
      url: 'frame0.html'
})
</script>

</html>

技术咨询-F · 回复于2021-12-13 10:40:11

新建项目时有模版，参考下模版代码

龙毅257 · 回复于2021-12-13 21:53:40

就是参考的模板代码，出现了这种情况

技术支持-F · 2021-12-13 10:40
新建项目时有模版，参考下模版代码

[多端开发] apicloud3.0 header异常