APICloud学习笔记之FrameGroup覆盖bug
当子页面再打开framegroup时，此framegroup会置于最顶部此bug处理方法如下：
1.在子页面定义一个事件控制framegroup的显示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 6 <title>端API</title> 7 <link rel="stylesheet" type="text/css" href="../css/api.css"/> 8 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 9 <style> 10 header{ 11 height:30px; 12 } 13 .order{ 14 position:absolute; 15 bottom:0px; 16 left:0px; 17 width:60px; 18 height:20px; 19 padding-top:10px; 20 text-align:center; 21 22 } 23 nav{ 24 display: -webkit-box; 25 display: -webkit-flex; 26 display: box; 27 -webkit-box-orient: horizontal; 28 -webkit-flex-flow: row; 29 flex-flow: row; 30 position:relative; 31 width:100%; 32 height:56px; 33 background-color:#ffffff; 34 } 35 .nav-item{ 36 padding-top:20px; 37 -webkit-box-flex: 1; 38 -webkit-flex: 1; 39 flex: 1; 40 border-bottom: 1px solid #f3f3f3; 41 text-align:center; 42 color:#afafaf; 43 } 44 .active{ color: #000000; } 45 .nav-item-bar{ 46 height:5px; 47 width:60%; 48 margin:0 auto; 49 50 } 51 .nav-item-text{ 52 text-align: center; 53 margin-bottom: 14px; 54 55 } 56 .bar-active{ 57 background-color:#ffd442; 58 } 59 .main{ 60 -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; 61 background-color: #6AB494; 62 } 63 </style> 64 </head> 65 <body> 66 <div id="header-content"> 67 <header> 68 <div class="order">订单</div> 69 </header> 70 <nav id="nav"> 71 <div tapmode="hover" name="nav-item" class="nav-item active" onclick="randomSwitchBtn( this );"> 72 <div class="nav-item-text ">全部订单</div> 73 <div class="nav-item-bar bar-active"></div> 74 </div> 75 <div tapmode="hover" name="nav-item" class="nav-item" onclick="randomSwitchBtn( this );"> 76 <div class="nav-item-text">待评价</div> 77 <div class="nav-item-bar"></div> 78 </div> 79 80 </nav> 81 82 </div> 83 84 </body> 85 <script type="text/javascript" src="../script/api.js"></script> 86 <script type="text/javascript"> 87 apiready = function () { 88 $api.fixStatusBar( $api.dom('header') ); 89 initEventListener(); 90 funIniGroup(); 91 } 92 function funIniGroup(){ 93 frames = []; 94 for (var i = 0,len = 2; i < len; i++) { 95 frames.push( { 96 name: 'frame_order'+i, 97 url: '../html/frame_order'+i+'.html', 98 bgColor : 'rgba(0,0,0,.2)', 99 bounces:true 100 } ) 101 } 102 api.openFrameGroup({ 103 name: 'orderGroup', 104 scrollEnabled: false, 105 rect: { 106 x: 0, 107 y: 30+56, 108 w: api.winWidth, 109 h: 450 110 }, 111 index: 0, 112 frames: frames 113 }, function (ret, err) { 114 115 }); 116 } 117 118 function initEventListener() { 119 api.addEventListener({ 120 name : 'indexChange' 121 }, function(ret, err) { 122 if (ret) { 123 if (ret.value) { 124 api.setFrameGroupAttr({ 125 name : 'orderGroup', 126 hidden : ret.value.isHidden 127 }); 128 } 129 } 130 }); 131 } 132 133 134 function randomSwitchBtn( tag ) { 135 136 if( tag == $api.dom('.nav-item.active') )return; 137 var eLis = $api.domAll('.nav-item'), 138 index = 0; 139 for (var i = 0,len = eLis.length; i < len; i++) { 140 if( tag == eLis[i] ){ 141 index = i; 142 }else{ 143 $api.removeCls(eLis[i], 'active'); 144 $api.removeCls(eLis[i].childNodes[3], 'bar-active'); 145 } 146 } 147 $api.addCls( eLis[index], 'active'); 148 $api.addCls(eLis[index].childNodes[3], 'bar-active'); 149 api.setFrameGroupIndex({ 150 name: 'orderGroup', 151 index: index 152 }); 153 } 154 </script> 155 </html>
2.在父页面传参数控制framegroup显示
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 6 <title>底部导航</title> 7 <link rel="stylesheet" type="text/css" href="../css/api.css"/> 8 <link rel="stylesheet" type="text/css" href="../css/style.css"/> 9 <style> 10 11 #footer{ background-color: #f2f2f2; } 12 #footer ul li{ padding-top: 36px; padding-bottom: 4px; background: url() no-repeat center 2px; background-size: auto 30px; text-align: center; } 13 #footer ul li.active{ color: #6ab494; } 14 #footer ul li:nth-child(1){ background-image: url(../image/a6p.png); } 15 #footer ul li:nth-child(2){ background-image: url(../image/a6n.png); } 16 #footer ul li:nth-child(3){ background-image: url(../image/a6r.png); } 17 18 #footer ul li:nth-child(1).active{ background-image: url(../image/a6q.png); } 19 #footer ul li:nth-child(2).active{ background-image: url(../image/a6o.png); } 20 #footer ul li:nth-child(3).active{ background-image: url(../image/a6s.png); } 21 22 </style> 23 </head> 24 <body> 25 <div id="wrap" class="flex-wrap flex-vertical"> 26 <header> 27 28 </header> 29 <div id="main" class="flex-con"> 30 31 </div> 32 <div id="footer" class="border-t"> 33 <ul class="flex-wrap" > 34 <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con active" >首页</li> 35 <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >订单</li> 36 <li tapmode="hover" onclick="randomSwitchBtn( this );" class="flex-con" >我的</li> 37 </ul> 38 </div> 39 </div> 40 </body> 41 </html> 42 <script type="text/javascript" src="../script/api.js"></script> 43 <script type="text/javascript"> 44 apiready = function () { 45 $api.fixStatusBar( $api.dom('header') ); 46 funIniGroup(); 47 48 } 49 50 function funIniGroup(){ 51 frames = []; 52 for (var i = 0,len = 3; i < len; i++) { 53 frames.push( { 54 name: 'frame'+i, 55 url: '../html/frame'+i+'.html', 56 bgColor : 'rgba(0,0,0,.2)', 57 bounces:true 58 } ) 59 } 60 api.openFrameGroup({ 61 name: 'group', 62 scrollEnabled: false, 63 rect: { 64 x: 0, 65 y: 0, 66 w: api.winWidth, 67 h: $api.dom('#main').offsetHeight 68 }, 69 index: 0, 70 frames: frames 71 }, function (ret, err) { 72 api.sendEvent({ 73 name : 'indexChange', 74 extra : { 75 isHidden : (ret.index == 0)||(ret.index == 2), 76 } 77 }); 78 }); 79 } 80 81 function fnSetNavMenuIndex(index_) { 82 fnSetNavMenuSelected(index_) 83 api.setFrameGroupIndex({ 84 name : 'mainGroup', 85 index : index_, 86 scroll : true, 87 }) 88 } 89 90 91 // 随意切换按钮 92 function randomSwitchBtn( tag ) { 93 if( tag == $api.dom('#footer li.active') )return; 94 var eFootLis = $api.domAll('#footer li'), 95 index = 0; 96 for (var i = 0,len = eFootLis.length; i < len; i++) { 97 if( tag == eFootLis[i] ){ 98 index = i; 99 }else{ 100 $api.removeCls(eFootLis[i], 'active'); 101 } 102 } 103 $api.addCls( eFootLis[index], 'active'); 104 105 api.setFrameGroupIndex({ 106 name: 'group', 107 index: index 108 }); 109 110 api.sendEvent({ 111 name : 'indexChange', 112 extra : { 113 isHidden : (index == 0)||(index == 2), 114 } 115 }); 116 } 117 </script>
