六、openFrameGroup嵌套openFrameGroup

main.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />

    <style  type="text/css">
    #bar{
      position: relative;
      width: 100%;
      height: 24px;
      background-color: #e1017e;
      border-bottom:rgba(255, 255, 255, 0.5) 0.3px solid;
    }


    nav {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient:horizontal;
      -webkit-flex-flow:row;
      flex-flow: row;
      position: relative;
      width: 100%;
      height: 40%;
      background-color: #e1017e;
    }
    nav .menu{
      -webkit-box-flex:1;
      -webkit-flex:1;
      flex: 1;
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      color: #fff;
      text-align: center;
    }

    nav .menu.selected{
     font-size: 14px;
     color: #000;
     font-weight: bolder;
    }

    #footer{
      position: fixed;
      width: 100%;
      height: 50px;
      line-height: 40px;
      bottom: 0px;
      background-color: #e1017e;
    }

    </style>

</head>
<body>
  <div id="bar"></div>

  <div id="footer">

    <nav id="nav">
      <div class="menu selected" tapmode onclick="fnSetNavMenuIndex(0);">聊天</div>
      <div class="menu" tapmode onclick="fnSetNavMenuIndex(1);">订单</div>
      <div class="menu" tapmode onclick="fnSetNavMenuIndex(2);">中心</div>
    </nav>

  </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">

var menus;
    apiready = function(){

       var bar = $api.byId('bar');
       //$api.fixStatusBar(header);//判断算上状态栏的高度
       var barH = $api.offset(bar).h;

       var footer = $api.byId('footer');
       //$api.fixStatusBar(header);//判断算上状态栏的高度
       var footerH = $api.offset(footer).h;

       menus=$api.domAll(nav, '.menu');
      var frames=[];
      for (var i = 0; i < menus.length; i++) {
        frames.push({
          name:'main_frame_' + i,
          url:'./main_frame_' + i + '.html',
          pageParam:{
            footerH:footerH,
            barH:barH
          }
        });
      }


      api.openFrameGroup ({
          name: 'mainFrameGroup',  //
          scrollEnabled: true,
          rect: {
               x: 0,
               y: barH,
               w: 'auto',
               h:api.winHeight - barH - footerH
          },
          index: 0,
          frames: frames
      }, function(ret, err){
          if( ret ){
             fnSetNavMenuSelected(ret.index);
             if(ret.index==1)
             {
               api.setFrameGroupAttr({
                   name: 'orderFrameGroup',
                   hidden: false
               });

             }
          }else{
            //   alert( JSON.stringify( err ) );
          }
      });

    };

    function fnSetNavMenuSelected(index_)
    {
        for (var i = 0; i < menus.length; i++) {
        if(index_==i)   //判断当前选中的那个元素,就给某一个元素增加样式
        {
            $api.addCls(menus[i],'selected');
        }else {
            $api.removeCls(menus[i],'selected');
        }
        }
    }

    function fnSetNavMenuIndex(index_)
    {
        fnSetNavMenuSelected(index_);
        api.setFrameGroupIndex({
            name: 'mainFrameGroup',
            index: index_,
            scroll: true
        });
        api.setFrameGroupAttr({ //注意 先隐藏  在另一个页面也需要隐藏 （两个隐藏解决）
            name: 'orderFrameGroup',
            hidden: true
        });
    }


</script>
</html>

main.frame_1.html页面

<!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>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
    header{
      position: relative;
      width: 100%;
      height: 40px;
      background-color: #e1017e;
    }

    header .center{
      position: relative;
      width: 100%;
      height: 40px;
      text-align: center;
    }

    </style>
</head>

<body style="background-color:#cccccc; height:850px;">
ssssssssssss
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
  apiready=function(){



    var footerH = api.pageParam.footerH;
    var barH = api.pageParam.barH;

    //var h= api.winHeight - barH - headerH;

      api.openFrameGroup ({
          name: 'orderFrameGroup',
          scrollEnabled: true,
          rect: {
               x: 0,
               y: barH,
               w: 'auto',
               h: api.winHeight - barH - footerH
          },
          index: 0,
          frames: [{
              name: 'frame3',
              url: './order_frame_0.html',
              bgColor: '#fff'
          },{
              name: 'frame4',
              url: './order_frame_1.html',
              bgColor: '#fff'
          }]
      }, function(ret, err){
          if( ret ){
               alert( JSON.stringify( ret ) );
          }else{
               alert( JSON.stringify( err ) );
          }
      });

      api.setFrameGroupAttr({   //这里opengroupframe 需要隐藏 
          name: 'orderFrameGroup',
          hidden: true
      });
  }
</script>

</html>

其他页面

main_frame_0

<!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>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <style>
    header{
      position: relative;
      width: 100%;
      height: 40px;
      background-color: #e1017e;
    }
    header .left{
      position: absolute;
      bottom: 0;
      left:0;
      width: 100px;
      height: 40px;
      line-height: 40px;
    }

    header .center{
      position: relative;
      width: 100%;
      height: 40px;
      background:url(../image/title_main.png);
      background-size: 74px 19px;
      background-position: center center;
      background-repeat: no-repeat;
    }
    header .right{
      position: absolute;
      bottom: 0;
      right:0;
      width: 80px;
      height: 40px;
      line-height: 40px;
      background:url(../image/membercenter.png);
      background-size: 30px 30px;
      background-position: center center;
      background-repeat: no-repeat;
    }
    </style>
</head>

<body style="background-color:#cccccc; height:850px;">
<header>
      <div class="left">离线</div>
      <div class="center"></div>
      <div class="right">审核中</div>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>


</html>

main_frame_2

<!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>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />

</head>

<body style="background-color:#cccccc; height:150px;">
2
</body>
<script type="text/javascript" src="../script/api.js"></script>


</html>

订单详细页面 order_frame_0

<!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" />

</head>
<body style="height:500px;background-color:#fff;">
待支付
s2</br>
s2</br>
s2</br>
s2</br>
s2</br>
s2</br>

</body>
<script type="text/javascript" src="../script/api.js"></script>
</html>

原文链接：https://blog.csdn.net/weixin_36792339/article/details/80750012

你可能也喜欢