mui bottom navigation-based webview mode

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 class="mui-bar mui-bar-tab" id="nav">
			<a class="mui-tab-item mui-active" id="0">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">home page</span>
			</a>
			<a class="mui-tab-item" id="1">
				<span class="mui-icon mui-icon-paperplane"></span>
				<span class="mui-tab-label">Hotspot</span>
			</a>
			<a class="mui-tab-item" id="2">
				<span class="mui-icon mui-icon-compose"></span>
				<span class="mui-tab-label">experience</span>
			</a>
			<a class="mui-tab-item" id="3">
				<span class="mui-icon mui-icon-chat"></span>
				<span class="mui-tab-label">news</span>
			</a>
			<a class="mui-tab-item" id="4">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">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.



Tags: Session

Posted on Mon, 04 May 2020 19:32:58 -0400 by danman252