2018-12-20 11:50:05
底部切换和顶部固定
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> 7 <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> 8 <title>进件管理</title> 9 <link rel="stylesheet" type="text/css" href="../css/api.css" /> 10 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 11 <link rel="stylesheet" type="text/css" href="../css/aui.css" /> 12 13 </head> 14 15 <body> 16 17 <header style="display:flex;flex-direction:column-reverse;" class="buy_car_wrap" id="header"> 18 <div style="100%;height:60px;display:flex;justify-content:space-around;align-items:center;"> 19 <div class="" onclick=""></div> 20 <div onclick="" id="div" style="height:100%;65%;display:flex;align-items:center;justify-content:center;">进件管理</div> 21 <div></div> 22 </div> 23 </header> 24 25 26 </body> 27 28 <script type="text/javascript" src="../script/api.js"></script> 29 <script type="text/javascript" src="../script/jquery.min.js"></script> 30 <script type="text/javascript" src="../script/common.js"></script> 31 <script type="text/javascript"> 32 var NVTabBarAnimation; 33 apiready = function() { 34 NVTabBarAnimation = api.require("NVTabBarAnimation"); 35 36 37 38 NVTabBarAnimation.open({ 39 styles: { 40 bg: '#fff', 41 h: 58, 42 badge: { 43 bgColor: '#f45815', 44 numColor: '#fff', 45 size: 7.0 46 } 47 }, 48 items: [{ 49 w: api.winWidth / 3.0, 50 bg: { 51 marginB: 0, 52 image: 'rgba(20,0,0,0)', 53 }, 54 icon: { 55 normal: 'widget://image/footer/form.png', 56 selected: 'widget://image/footer/form-blue.png', 57 rect: { 58 w: 20.0, 59 h: 20.0, 60 x: 0, 61 y: 0, 62 }, 63 }, 64 title: { 65 text: '进件管理', 66 size: 14.0, 67 normal: '#8a8a8a', 68 selected: '#1296db', 69 marginB: 6.0, 70 //ttf: 'Alkatip Basma Tom' 71 72 }, 73 rect: { 74 w: api.winWidth / 3.0, 75 x: 0, 76 y: 0, 77 }, 78 }, { 79 w: api.winWidth / 3.0, 80 bg: { 81 marginB: 0, 82 image: 'rgba(0,0,0,0)', 83 }, 84 icon: { 85 normal: 'widget://image/footer/manage-order.png', 86 selected: 'widget://image/footer/manage-order-blue.png', 87 rect: { 88 w: 20.0, 89 h: 20.0, 90 x: 0, 91 y: 0, 92 }, 93 }, 94 95 title: { 96 text: '贷后管理', 97 size: 14.0, 98 normal: '#8a8a8a', 99 selected: '#1296db', 100 marginB: 6.0, 101 //ttf: 'Alkatip Basma Tom' 102 }, 103 rect: { 104 w: api.winWidth / 3.0, 105 x: 0, 106 y: 0, 107 }, 108 }, { 109 w: api.winWidth / 3.0, 110 bg: { 111 marginB: 0, 112 image: 'rgba(0,0,0,0)', 113 }, 114 icon: { 115 normal: 'widget://image/footer/bussiness-man.png', 116 selected: 'widget://image/footer/bussiness-man-blue.png', 117 rect: { 118 w: 20.0, 119 h: 20.0, 120 x: 0, 121 y: 0, 122 }, 123 }, 124 title: { 125 text: '个人中心', 126 size: 14.0, 127 normal: '#8a8a8a', 128 selected: '#1296db', 129 marginB: 6.0, 130 //ttf: 'Alkatip Basma Tom' 131 }, 132 rect: { 133 w: api.winWidth / 3.0, 134 x: 0, 135 y: 0, 136 }, 137 }], 138 selectedIndex: 0 139 }, function(ret, err) { 140 console.log(JSON.stringify(ret)); 141 if (ret && ret.eventType == "click" && ret.index == 0) { 142 //进件管理 143 var header = $api.byId('header'); 144 var headerH = $api.offset(header).h; 145 $('#div').html('进件管理'); 146 147 api.openFrame({ 148 name: 'tab-stock', 149 url: './tab-stock.html',//第一个页面 index为0 150 rect: { 151 x: 0, 152 y: headerH, 153 w: 'auto', 154 h: api.frameHeight - headerH, 155 marginBottom:58 156 }, 157 pageParam: { 158 name: 'test' 159 }, 160 bgColor: 'rgba(0,0,0,0)', 161 // vScrollBarEnabled: true, 162 //hScrollBarEnabled: true 163 }); 164 165 }else if (ret && ret.eventType == "click" && ret.index == 1) { 166 //贷后管理 167 var header = $api.byId('header'); 168 var headerH = $api.offset(header).h; 169 $('#div').html('贷后管理'); 170 171 api.openFrame({ 172 name: 'tab-loan', 173 url: './tab-loan.html',//第二个页面 index为1 174 rect: { 175 x: 0, 176 y: headerH, 177 w: 'auto', 178 h: api.frameHeight - headerH, 179 marginBottom:58 180 }, 181 pageParam: { 182 name: 'test' 183 }, 184 bgColor: 'rgba(0,0,0,0)', 185 // vScrollBarEnabled: true, 186 //hScrollBarEnabled: true 187 }); 188 189 }else if (ret && ret.eventType == "click" && ret.index == 2) { 190 //个人中心 191 var header = $api.byId('header'); 192 var headerH = $api.offset(header).h; 193 $('#div').html('个人中心'); 194 195 api.openFrame({ 196 name: 'tab-min', 197 url: './tab-min.html',//第三个页面 index为2 198 rect: { 199 x: 0, 200 y: headerH, 201 w: 'auto', 202 h: api.frameHeight - headerH, 203 marginBottom:58 204 }, 205 pageParam: { 206 name: 'test' 207 }, 208 bgColor: 'rgba(0,0,0,0)', 209 // vScrollBarEnabled: true, 210 //hScrollBarEnabled: true 211 }); 212 213 } 214 }); 215 } 216 217 218 </script> 219 220 </html>