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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
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
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"
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 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 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.
Usage of WPSdatedif function
Feb 20, 2024 pm 10:27 PM
WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.
How to reset only C drive on Windows 11
Nov 18, 2023 pm 11:22 PM
If you have a problem with your Windows 11 computer, the best fix is to reset it, and in the latest version, Windows allows you to reset only the C drive, leaving the other drives unchanged. In this guide, we'll discuss three simple ways to reset your PC and make it work properly without deleting data on other drives. How to reset only C drive in Windows 11? Before proceeding with the steps to reset C drive on Windows 11, make sure you check the following: If you want to choose the cloud download option, make sure you have an active internet connection or switch to an Ethernet cable. Make sure to back up or move important data from your system drive. Check that the system drive has sufficient disk space. 1.Use
