Utilisation des onglets supérieurs de MUI
1Préface
Un framework front-end hautes performances qui se rapproche le plus de l'expérience APP native. les fonctions importantes sont : l'actualisation déroulante, la navigation latérale coulissante, le menu d'opération de déclenchement coulissant et les onglets supérieurs (inférieurs), etc.
Récemment, j'ai rencontré un petit bug lors de l'utilisation de MUI pour créer une application mobile. Au fait, j'ai étudié cet onglet-top-webview-main et je le partage avec vous ici.
Code de la page d'accueil
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>Code de sous-page
3
<!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>Explication du code
1. Super vue de la sous-page tab L'attribut data-wid="" du lien a doit être défini sur le chemin de l'onglet de la sous-page correspondante.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>
.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment définir la mise au point par défaut de l'appareil photo sur iPhone 15 Pro
Sep 22, 2023 pm 11:53 PM
Sur le modèle iPhone 15 Pro, Apple a introduit trois options de distance focale pour la prise de vue avec l'appareil photo principal. Cet article explique quelles sont ces options et comment définir votre distance focale par défaut préférée pour prendre des photos. Pour profiter pleinement du système de caméra amélioré sur l’iPhone 15 Pro et l’iPhone 15 Pro Max, Apple a ajouté trois options de distance focale différentes au zoom optique de la caméra principale. En plus du mode standard par défaut 1x (24 mm), Apple a ajouté les paramètres 1,2x (28 mm) et 1,5x (35 mm). Les utilisateurs d’iPhone 15 Pro peuvent choisir parmi ces distances focales lorsqu’ils prennent des photos en appuyant simplement sur le bouton 1x dans l’application Appareil photo. Cependant, pour des raisons techniques, ces focales
Comment utiliser les guillemets dans Apple Notes
Oct 12, 2023 pm 11:49 PM
Dans iOS 17 et macOS Sonoma, Apple a ajouté de nouvelles options de formatage pour Apple Notes, notamment des guillemets et un nouveau style Monostyle. Voici comment les utiliser. Avec des options de formatage supplémentaires dans Apple Notes, vous pouvez désormais ajouter des guillemets à vos notes. Le format de citation en bloc facilite le décalage visuel des sections d'écriture à l'aide de la barre de citation à gauche du texte. Appuyez/cliquez simplement sur le bouton de format « Aa » et sélectionnez l'option de citation en bloc avant de taper ou lorsque vous êtes sur la ligne que vous souhaitez convertir en citation en bloc. Cette option s'applique à tous les types de texte, options de style et listes, y compris les listes de contrôle. Dans le même menu Format, vous pouvez trouver la nouvelle option Style unique. Il s'agit d'une révision du précédent modèle "à largeur égale".
Correctif : l'option Dock dans la barre des tâches est grisée sous Windows 11
Sep 15, 2023 pm 05:35 PM
La barre de langue est une fonctionnalité importante de Windows qui permet aux utilisateurs de changer rapidement de saisie au lieu d'utiliser le raccourci clavier +. Mais dans certains cas, l'option Dock dans la barre des tâches apparaît en gris dans Windows 11. Ce problème avec WindowsSpacebar semble être très courant et il n’existe pas de solution. Nous avons essayé de modifier les paramètres de langue et de reconfigurer le contenu, mais en vain. Bien que nous ayons finalement réussi à trouver la cause profonde et la solution. Pourquoi ne puis-je pas ancrer la barre de langue dans la barre des tâches sous Windows 11 ? Vous n'avez qu'une seule langue installée et la barre de langue ne fonctionne qu'avec plusieurs langues. La langue n'est pas installée correctement. Un bug dans Windows 11. Fichiers système ou profils utilisateur corrompus. Si en W
Analyser l'utilisation et la classification des commentaires JSP
Feb 01, 2024 am 08:01 AM
Classification et analyse de l'utilisation des commentaires JSP Les commentaires JSP sont divisés en deux types : commentaires sur une seule ligne : se terminant par, une seule ligne de code peut être commentée. Commentaires multilignes : commençant par /* et se terminant par */, vous pouvez commenter plusieurs lignes de code. Exemple de commentaire sur une seule ligne Exemple de commentaire sur plusieurs lignes/**Ceci est un commentaire sur plusieurs lignes*Peut commenter plusieurs lignes de code*/Utilisation des commentaires JSP Les commentaires JSP peuvent être utilisés pour commenter le code JSP afin de le rendre plus facile à lire
Comment gérer les cases à cocher et les boutons radio dans les formulaires PHP
Aug 11, 2023 am 08:39 AM
Comment gérer les cases à cocher et les boutons radio dans les formulaires PHP Dans le développement Web, les formulaires sont l'un des principaux moyens d'interaction des données entre les applications et les utilisateurs. Dans les formulaires, nous devons parfois utiliser des cases à cocher et des boutons radio pour sélectionner des options. Cet article explique comment gérer les cases à cocher et les boutons radio en PHP. 1. Traitement des cases à cocher En HTML, nous pouvons utiliser <inputtype="checkbox&qu
Comment ouvrir les options Internet dans le navigateur Edge
Jan 03, 2024 pm 12:49 PM
Les amis qui utilisent le navigateur IE utiliseront certainement les options Internet pour le configurer, mais ils ne peuvent pas être trouvés sur le navigateur Edge, alors comment l'ouvrir ? En fait, il vous suffit d'ouvrir le navigateur IE dans le navigateur Edge pour le configurer. Où se trouvent les options Internet du navigateur Edge : 1. Entrez dans le navigateur Edge et cliquez sur les trois points dans le coin supérieur droit. 2. Sélectionnez "Plus d'outils" dans la barre des tâches. 3. Sélectionnez "Ouvrir avec Internet Explorer" dans la nouvelle interface. 4. Cliquez sur « Paramètres Gear » dans le coin supérieur droit du nouveau navigateur. 5. Vous pouvez trouver « Options Internet » dans la barre des tâches. 6. Cliquez pour entrer les paramètres.
Utilisation de la fonction WPSdatedif
Feb 20, 2024 pm 10:27 PM
WPS est une suite logicielle bureautique couramment utilisée et la fonction de table WPS est largement utilisée pour le traitement des données et les calculs. Dans le tableau WPS, il existe une fonction très utile, la fonction DATEDIF, qui permet de calculer le décalage horaire entre deux dates. La fonction DATEDIF est l'abréviation du mot anglais DateDifference. Sa syntaxe est la suivante : DATEDIF(start_date,end_date,unit) où start_date représente la date de début.
Comment utiliser correctement la fonction exit en langage C
Feb 18, 2024 pm 03:40 PM
Comment utiliser la fonction exit en langage C nécessite des exemples de code spécifiques. En langage C, nous devons souvent terminer l'exécution du programme au début du programme, ou quitter le programme sous certaines conditions. Le langage C fournit la fonction exit() pour implémenter cette fonction. Cet article présentera l'utilisation de la fonction exit() et fournira des exemples de code correspondants. La fonction exit() est une fonction de bibliothèque standard en langage C et est incluse dans le fichier d'en-tête. Sa fonction est de terminer l'exécution du programme, et peut prendre un nombre entier
