Usage of MUI top tabs
1Preface
A high-performance front-end framework that is closest to the native APP experience. Its more important functions are: pull-down refresh, side-sliding navigation, sliding trigger operation menu and top (bottom) tabs, etc.
Recently, I encountered a small bug when using MUI to make a mobile app. By the way, I studied this tab-top-webview-main, and I will share it with you here.
Homepage code##<!doctype html><html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.d1{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p class="d1">我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
subpages:[{ //下边是初始化，然后这个页面显示我们将插入的页面
url:"tab-top-webview-main.html",
id:"tab-top-webview-main.html",
styles:{
top:"50px",
bottom:"0px"
}
}]
}) </script></html>Copy after login
2<!doctype html><html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style type="text/css">
.d1{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p class="d1">我是p1,下面是插入的子页面</p> <!--我们将在这个p下边插入子页面-->
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
subpages:[{ //下边是初始化，然后这个页面显示我们将插入的页面
url:"tab-top-webview-main.html",
id:"tab-top-webview-main.html",
styles:{
top:"50px",
bottom:"0px"
}
}]
}) </script></html>##<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<p class="mui-content">
<p id="slider" class="mui-slider mui-fullscreen">
<p id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<p class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
推荐 </a>
<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
热点 </a>
</p>
</p>
</p>
</p>
<script src="js/mui.min.js"></script>
<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
mui.plusReady(function() {
var group = new webviewGroup("tab-top-webview-main.html", {
items: [{
id: "tab-top-subpage-1.html", //这是子页1的路径
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html", //这是子页2的路径
url: "tab-top-subpage-2.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
}
});
mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("data-wid");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
} </script>
</body></html>Copy after login3
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<p class="mui-content">
<p id="slider" class="mui-slider mui-fullscreen">
<p id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<p class="mui-scroll">
<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
推荐 </a>
<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
热点 </a>
</p>
</p>
</p>
</p>
<script src="js/mui.min.js"></script>
<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
mui.plusReady(function() {
var group = new webviewGroup("tab-top-webview-main.html", {
items: [{
id: "tab-top-subpage-1.html", //这是子页1的路径
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html", //这是子页2的路径
url: "tab-top-subpage-2.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
}
});
mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("data-wid");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
} </script>
</body></html>
Code explanation
##var group = new webviewGroup("tab-top-webview-main.html", {
items: [{
id: "tab-top-subpage-1.html", //这是子页1的路径
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html", //这是子页2的路径
url: "tab-top-subpage-2.html",
extras: {}
}]
})Copy after login 1. Data-wid of hyperlink a of sub-page tab The ="" attribute needs to be set to the corresponding subpage tab path.
var group = new webviewGroup("tab-top-webview-main.html", {
items: [{
id: "tab-top-subpage-1.html", //这是子页1的路径
url: "tab-top-subpage-1.html",
extras: {}
}, {
id: "tab-top-subpage-2.html", //这是子页2的路径
url: "tab-top-subpage-2.html",
extras: {}
}]
})<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
推荐</a> 2. Here, the first parameter of new webviewGroup("tab-top-webview-main.html",{}) needs to pass in the id of a page. It should be noted that this page id is the page that contains the top tab, which is the page where our js is currently located
new webviewGroup("tab-top-webview-main.html", {} 3. Pass in the items array is the id of the imported subpage corresponding to the subpage. If there are several subpages, add several subpages, separated by commas
The above is the detailed content of Usage of MUI top tabs. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set default camera focus on iPhone 15 Pro
Sep 22, 2023 pm 11:53 PM
On the iPhone 15 Pro model, Apple has introduced three focal length options for shooting with the main camera. This article explains what these options are and how to set your preferred default focal length for taking photos. To take full advantage of the enhanced camera system on iPhone 15 Pro and iPhone 15 Pro Max, Apple has added three different focal length options to the main camera’s optical zoom. In addition to the standard default 1x (24mm) mode, Apple has added 1.2x (28mm) and 1.5x (35mm) settings. iPhone 15 Pro users can choose from these focal lengths when taking photos by simply tapping the 1x button in the Camera app. However, due to technical reasons, these focal
How to use block quotes in Apple Notes
Oct 12, 2023 pm 11:49 PM
In iOS 17 and macOS Sonoma, Apple has added new formatting options for Apple Notes, including block quotes and a new Monostyle style. Here's how to use them. With additional formatting options in Apple Notes, you can now add block quotes to your notes. The block quote format makes it easy to visually offset sections of writing using the quote bar to the left of the text. Just tap/click the "Aa" format button and select the block quote option before typing or when you are on the line you want to convert to a block quote. This option applies to all text types, style options, and lists, including checklists. In the same Format menu you can find the new Single Style option. This is a revision of the previous "equal-width"
Fix: Dock in taskbar option is grayed out on Windows 11
Sep 15, 2023 pm 05:35 PM
The language bar is an important feature in Windows that allows users to quickly switch inputs instead of using the + keyboard shortcut. But in some cases, the dock option in the taskbar appears gray in Windows 11. This problem with WindowsSpacebar seems to be very common and there is no solution. We tried changing the language settings and reconfiguring the content, but to no avail. Although we finally managed to find the root cause and solution. Why can't I dock the language bar in the taskbar in Windows 11? You only have one language installed, and the language bar only works with multiple languages. The language is not installed correctly. A bug in Windows 11. Corrupted system files or user profiles. If in W
Analyze the usage and classification of JSP comments
Feb 01, 2024 am 08:01 AM
Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read
How to open Internet options in Edge browser
Jan 03, 2024 pm 12:49 PM
Friends who use IE browser will definitely use Internet options to set it up, but they can’t be found on edge browser, so how to open it? In fact, you only need to open the IE browser in the edge browser to set it up. Where are the internet options of the edge browser: 1. Enter the edge browser and click the three dots in the upper right corner. 2. Select "More Tools" in the taskbar. 3. Select "Open with Internet Explorer" in the new interface. 4. Click "Gear Settings" in the upper right corner of the new browser. 5. You can find "Internet Options" in the taskbar. 6. Click to enter settings.
How to deal with checkboxes and radiobuttons in PHP forms
Aug 11, 2023 am 08:39 AM
How to handle checkboxes and radio buttons in PHP forms In web development, forms are one of the main ways of data interaction between applications and users. In forms, sometimes we need to use checkboxes and radiobuttons to select options. This article will explain how to handle checkboxes and radio buttons in PHP. 1. Checkbox processing In HTML, we can use <inputtype="checkbox&qu
How to correctly use the exit function in C language
Feb 18, 2024 pm 03:40 PM
How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer
How to leave S mode on Windows 10/11
Aug 03, 2023 pm 08:17 PM
Windows in S mode is designed to provide enhanced security and performance by only allowing the installation of apps from the Microsoft Store. While this feature helps prevent malware and ensure a secure computing environment, it may limit users who want to install applications from sources other than the Microsoft Store. If you find yourself in this situation and keep asking yourself how to switch out of S mode in Windows 10/11, then you have come to the right place as we will walk you through how to switch out in Windows 10/11 using two different methods Steps to S Mode ensure you can enjoy the freedom of installing apps from anywhere you choose. Learn how to switch out of S mode in Windows
