apicloud ： openFrameGroup 使用

css 

     
        #wrap{ height: 100%; }
       .flex-wrap{ display: -webkit-box;    display: -webkit-flex;    display: flex; }//**
       .flex-vertical{ -webkit-box-orient: vertical;-webkit-flex-flow: column;flex-flow: column;}
        
       .flex-con{ -webkit-box-flex: 1;     -webkit-flex: 1;    flex: 1;}//*****


        .active{
          color: #61d6ce;
        }
        .flex-con{
          overflow: auto
        }
        #main{
          background-color: #f7f7f7
        }
           
 
     

        footer{
             height: 60px;
              line-height: 60px;
              background-color: #fff;
              width: 100%;    
        }
        footer ul{
           border-top: 1px solid #e3e3e3;
           text-align: center;
           display: -webkit-box;    
           display: -webkit-flex;    
           display: flex;  //***
        }
        footer ul li{
            flex-flow: row nowrap;
            justify-content:space-between; //****
            flex-grow:1;
            text-align: center;  
        }
         footer ul li.active{ 
            color: #6ab494; 
        }

 

html

<div id="wrap" class="flex-wrap flex-vertical">
  <header id="header" class="header">
首页
  </header>
  <div id="main" class="flex-con">

  </div>
  <footer id="footer" class="footer">
    <ul>
      <li οnclick="btn(this,'aa')" >
        aa
      </li>
      <li οnclick="btn(this,'bb')">
bb
      </li>

      <li οnclick="btn(this,'main')" class="active">首页
      </li>
 

  
    </ul>
  </footer> 

 

 

 

 

 script: 

<script type="text/javascript">
apiready = function () {
   goItemFrame( );  
}
 
function goItemFrame( ){
 
    api.openFrameGroup({ // 打开 frame 组
        name: 'group',
        scrollEnabled: false,
        rect: {
            x: 0,
            y: $api.dom('header').offsetHeight,
            w: api.winWidth,
            h: $api.dom('#main').offsetHeight
        },
        index: 0,//默认第1个tab显示
        frames:  
        [ 
         {
            name: 'aa', 
            url: './html/aa.html', 
            bounces:true, 
            vScrollBarEnabled:false,
            hScrollBarEnabled:false
         }, 
         {
             name: 'bb', 
            url: './html/bb.html', 
            bounces:true, 
            vScrollBarEnabled:false,
            hScrollBarEnabled:false
        },
　　　　　　

 　　　　{
             name: 'main', 
            url: './html/main.html', 
            bounces:true, 
            vScrollBarEnabled:false,
            hScrollBarEnabled:false }]
  }, function (ret, err) { 
　　　　alert(ret.index); //获取当前切换到的索引值 });
 } 

function btn(tag,nm){
 　　var eFootLis = $api.domAll('#footer ul 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.addCls( eFootLis[index], 'active'); 
　　api.setFrameGroupIndex({ 
　　　　name: 'group', 
　　　　index: index,//设置每次切换的索引 
　　　　scroll: true// 滚动切换 
　　}); 
　　goItemFrame(); 
} 

</script>

 

转载于:https://www.cnblogs.com/xiaohuizhenyoucai/p/11364049.html