当子页面再打开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>
时间： 2024-10-18 16:11:13