首页 > 代码库 > APICloud学习笔记之FrameGroup覆盖bug

APICloud学习笔记之FrameGroup覆盖bug

2024-09-18 00:19:39   217人阅读

当子页面再打开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>

 

APICloud学习笔记之FrameGroup覆盖bug


联系
我们