During my recent app session with MUI, the first page wanted to do a bottom navigation based on webview mode. I found an example on Baidu, but there was a problem with this example, and I finally abandoned it and implemented it in a different way. The original Mui provided a solution, but the latest version no longer exists, there are only two ways to achieve it:
The div mode, which simply means that one page writes html code for multiple pages, toggles by hiding the display, only works in scenarios where business logic is simple, and the second one doesn't work for my needs and gives up.So I do this by myself, based on official documents and other people's blogs.
HTML code: The following navigation bar is generated from the mt shortcut key of the HBuilder compiler:
<nav id="nav"> <a id="0"> <span></span> <span>home page</span> </a> <a id="1"> <span></span> <span>Hotspot</span> </a> <a id="2"> <span></span> <span>experience</span> </a> <a id="3"> <span></span> <span>news</span> </a> <a id="4"> <span></span> <span>My</span> </a> </nav>Set the id of the five a tags, from 0 to 4, then write the js code, write the code in mui.plusReady, and execute the business logic inside when the page is loaded
mui.plusReady(function() { //Set the number of subpages displayed on the default open home page var Index = 0; //Write subpage paths in arrays var subpages = ['home.html', 'hotspot.html', 'experience.html', 'news.html', 'mine.html'] //Gets the Webview window object to which the current page belongs var self = plus.webview.currentWebview(); for(var i = 0; i < 5; i++) { //Create webview subpage var sub = plus.webview.create( subpages[i], //Subpage url subpages[i], //Subpage id { top: '0px', bottom: '44px', scrollIndicator: "none" //Hide scrollbars } ); //Hide if it's not a subpage we set if(i != Index) { sub.hide() } //Fill the webview object in the window self.append(sub) } //Current Activation Options var activeTab = subpages[Index] var targetTab; mui('.mui-bar-tab').on('tap', 'a', function(e) { //Get the id of the subpage var j = this.getAttribute('id') targetTab = subpages[j] if(activeTab == targetTab) { return } //Show Target Tab plus.webview.show(targetTab) //Hide the current tab plus.webview.hide(activeTab) //Change the current active tab activeTab = targetTab }) })Then create five pages, save the page address in the subpages array, and loop through the creation of the webview subpage, fill the window with the five generated webview subpage objects, and listen for the a tag click event to get the click
The id of the a tag of, gets the page address in the array by coordinates, then shows the target tab, hides the current tab.This completes bottom navigation - based on webview mode, more complex sub-page operations can be completed in sub-pages, and sub-pages can be refreshed by pull-down loading.