frameGroup切换

场景： 通常我们会遇到 底部导航 切换的需求，这个时候我们可以使用frameGroup来实现。

• 页面结构拆分

  <div id="wrap" class="flex-wrap flex-vertical">
    <div id="main" class="flex-con"></div>
    <div id="footer" class="footer_nav">
      <div class="items cur" tapmode="cur" onclick="changefooterTab(this)"><i class="icon-resource"></i><span>资源库</span></div>
      <div class="items" tapmode="cur" onclick="changefooterTab(this)"><i class="icon-release"></i><span>发布</span></div>
      <div class="items" tapmode="cur" onclick="changefooterTab(this)"><i class="icon-usercenter"></i><span>个人中心</span></div>
    </div>
  </div>
  

• 初始化frameGroup

  // html/main.html
  var framesName = ['resource', 'release', 'user']; // 配置frame名称
  // 初始化frameGroup
  function funIniGroup(){
    var eFootLis = $api.domAll('#footer .items'),
        frames = [];
    for (var i = 0,len = eFootLis.length; i < len; i++) {
            frames.push( {
                name: framesName[i],
                url: './'+framesName[i]+'.html',
                bgColor : 'rgba(0,0,0,.2)',
                bounces:true
            } )
    }
    api.openFrameGroup({
        name: 'group',
        scrollEnabled: false,
        rect: {
            x: 0,
            y: 0,
            w: api.winWidth,
            h: $api.dom('#main').offsetHeight
        },
        index: 0,
        frames: frames
    }, function (ret, err) {
  
    });
  }
  

• footer切换按钮

  function changefooterTab( tag ) {
  // 当前高亮不做操作
  if( tag == $api.dom('#footer .items.cur') )return;
  
  var eFootLis = $api.domAll('#footer .items'),
      index = 0;
  for (var i = 0,len = eFootLis.length; i < len; i++) {
      if( tag == eFootLis[i] ){
          index = i;
      }else{
          $api.removeCls(eFootLis[i], 'cur');
      }
  }
  $api.addCls( eFootLis[index], 'cur');
  api.setFrameGroupIndex({
      name: 'group',
      index: index
  });
  
  // 使用framgGroup时，frame里又打开了新frame，切换framegroup组中frame时，只有frameGroup中的frame会显示和隐藏，而其它frame(嵌套的frame)会一直显示。
  // 原因： 在APICloud中，frame与frame之间是平等的，使用openFrameGroup时，组内frame的隐藏/显示不会影响组外frame。
  // url: http://www.lg0351.com/news/show-609.html
  if (index !== 0) {
    api.setFrameAttr({ name: 'matchlist', hidden: true });
  }else{
    api.setFrameAttr({ name: 'matchlist', hidden: false });
  }
  }