码迷,mamicode.com
首页 > 其他好文 > 详细

mui如何实现底部跳转

时间:2020-07-06 12:31:53      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:bsp   跳转   idt   email   设置   fun   adp   inf   viewport   

 1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8         <link href="../css/mui.min.css" rel="stylesheet" />
 9     </head>
10 
11     <body>
12         <script src="../js/mui.min.js"></script>
13         <script type="text/javascript">
14             mui.init()
15         </script>
16         <nav class="mui-bar mui-bar-tab" id="nav">
17         <a id="tab_home" class="mui-tab-item mui-active" >
18             <span class="mui-icon mui-icon-home" ></span>
19             <span class="mui-tab-label">首页</span>
20         </a>
21         <a id="tab_message" class="mui-tab-item">
22             <span class="mui-icon mui-icon-email"></span>
23             <span class="mui-tab-label">消息</span>
24         </a>
25         <a id="tab_setting" class="mui-tab-item" >
26             <span class="mui-icon mui-icon-gear"></span>
27             <span class="mui-tab-label">设置</span>
28         </a>
29     </nav>
30 
31     <script type="text/javascript" charset="utf-8">
32           mui.init({
33               subpages:[//首先加载首页
34                         {
35                             url:homepage.html,
36                             id:tab_home,
37                             styles:{
38                                 top:0px,
39                                 bottom:60px
40                             }
41                         }
42                     ],
43             preloadPages:[//预加载其他页面
44                 {
45                     url:deviceinfo.html,
46                     id:tab_message,
47                     styles:{
48                     top:0px,
49                     bottom:60px
50                     }
51                 },
52                 {
53                     url:my.html,
54                     id:tab_setting,
55                     styles:{
56                         top:0px,
57                         bottom:60px
58                     }
59                 },
60 
61 
62             ]
63           });
64           mui.plusReady(function(){
65               var tab_home,tab_message,tab_contact
66                 mui("#nav").on("tap","#tab_home",function(){//点击触发
67                     tab_home=plus.webview.getWebviewById("tab_home");
68                     tab_home.show()
69                     tab_message.hide()
70 
71                     tab_setting.hide()
72                 })
73                 mui("#nav").on("tap","#tab_message",function(){//点击触发
74                     tab_message=plus.webview.getWebviewById("tab_message");
75                     tab_message.show()
76 
77                 })
78 
79                 mui("#nav").on("tap","#tab_setting",function(){//点击触发
80                     tab_setting=plus.webview.getWebviewById("tab_setting");
81                     tab_setting.show()
82                 })
83           })
84 
85     </script>
86     </body>
87 
88 </html>

 

mui如何实现底部跳转

标签:bsp   跳转   idt   email   设置   fun   adp   inf   viewport   

原文地址:https://www.cnblogs.com/ZHANG576433951/p/13253971.html

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