mui如何实现底部跳转
Posted zhang576433951
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui如何实现底部跳转相关的知识，希望对你有一定的参考价值。
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如何实现底部跳转的主要内容，如果未能解决你的问题，请参考以下文章