MUI框架關於底部導航切換至不同頁面(webview)的方法
阿新 • • 發佈:2018-12-24
1. 先顯示第一個,隱藏剩下的;點選時,根據href顯示點選的頁面,隱藏前一個,其中包含了iframe的相容方案,程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">標題</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="home.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="message.html"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">訊息</span> </a> <a class="mui-tab-item" href="setting.html"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設定</span> </a> </nav> <script type="text/javascript" charset="utf-8"> mui.init(); var index = 0; var subpages = ['home.html','message.html','setting.html']; mui.plusReady(function () { var self = plus.webview.currentWebview(); for (var i = 0; i < subpages.length; i++) { var sub = plus.webview.create( subpages[i], subpages[i], { top: '45px', bottom: '50px' }); if(i > index){ sub.hide(); } self.append(sub); } }); var activeTab = subpages[index]; mui('.mui-bar-tab').on('tap', 'a', function (){ var targetTab = this.getAttribute('href'); if(activeTab == targetTab){ return; } if(mui.os.plus){ plus.webview.show(targetTab); plus.webview.hide(activeTab); activeTab = targetTab; } else { createIframe('.mui-content', { url: targetTab, style: { top: '45px', bottom: '50px' } }) } }); function createIframe(el,opt) { var elContainer = document.querySelector('mui-content'); var wrapper = document.querySelector('.mui-iframe-wrapper'); if(!wrapper){ wrapper = document.createElement('div'); wrapper.className = 'mui-iframe-wrapper'; for (var i in opt.style) { wrapper[i] = opt.style[i]; } } var iframe = document.createElement('iframe'); iframe.src = opt.url; iframe.id = opt.id || opt.url; iframe.name = opt.id; wrapper.appendChild(iframe); elContainer.appendChild(wrapper); } </script> </body> </html>
2. 採用雙webview,需要在manifest.json中:“plus”中配置第一張載入的webview,
程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">標題</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="home.html"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="message.html"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">訊息</span> </a> <a class="mui-tab-item" href="setting.html"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設定</span> </a> </nav> <script type="text/javascript" charset="utf-8"> mui.init(); var subpages = ['home.html','message.html','setting.html']; var activeTab = subpages[0]; var currentWebview; var subpage_style = { top: '45px', bottom:'50px' } mui.plusReady(function () { currentWebview = plus.webview.currentWebview(); var secondWenview = plus.webview.getSecondWebview(); currentWebview.append(secondWenview); }); mui('.mui-bar-tab').on('tap', 'a', function() { var targetTab =this.getAttribute('href'); if(targetTab == activeTab){ return; } var targetWebview = plus.webview.getWebviewById(targetTab); if(!targetWebview){ targetWebview = plus.webview.create(targetTab, targetTab, subpage_style); currentWebview.append(targetWebview); } targetWebview.show('fade-in', 300); plus.webview.hide(activeTab); activeTab = targetTab; }) </script> </body> </html>