码迷,mamicode.com
首页 > Windows程序 > 详细

Apicloud——NVTabBarAnimation插件

时间:2018-12-20 14:30:10      阅读:304      评论:0      收藏:0      [点我收藏+]

标签:badge   play   nes   amp   charset   console   fun   body   lse   

2018-12-20 11:50:05

底部切换和顶部固定  

NVTabBarAnimation插件  官方Api

  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="width: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%;width: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>

 

Apicloud——NVTabBarAnimation插件

标签:badge   play   nes   amp   charset   console   fun   body   lse   

原文地址:https://www.cnblogs.com/jry199506/p/10148548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!