Maison > Article > interface Web > Explication détaillée de l'utilisation de l'onglet supérieur de MUI

Explication détaillée de l'utilisation de l'onglet supérieur de MUI

小云云original: 2018-01-27 13:17:283320parcourir

MUI est un framework frontal hautes performances qui se rapproche le plus de l'expérience native de l'APP. Ses fonctions les plus importantes sont : l'actualisation déroulante, la navigation latérale, le menu d'opération de déclenchement coulissant et les onglets supérieurs (inférieurs), etc. .

Un petit bug que j'ai rencontré récemment 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.

1 Code de la page d'accueil

<!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="external nofollow" rel="external nofollow" 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>

2 Code de la sous-page

<!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" rel="external nofollow" rel="external nofollow" >
  </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" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
            </a>
            <a class="mui-control-item" href="#item2mobile" rel="external nofollow" 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>

3 Explication du code

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: {}
    }]
  })

1. Sous-page tab L'attribut data-wid="" du lien hypertexte a doit être défini sur le chemin de l'onglet de la sous-page correspondante.

<a class="mui-control-item mui-active" href="#item1mobile" rel="external nofollow" rel="external nofollow" data-wid="tab-top-subpage-1.html">
              推荐
</a>

　2. Ici, le premier paramètre de new webviewGroup("tab-top-webview-main.html",{}) doit transmettre l'identifiant d'une page. Il est à noter que cet identifiant de page est la page qui contient l'onglet du haut, qui est la page où se trouve actuellement notre js

new webviewGroup("tab-top-webview-main.html", {}

3. Ce qui est passé dans le tableau items est l'onglet correspondant à la sous-page L'identifiant de la sous-page importée, s'il y a plusieurs sous-pages, ajoutez plusieurs sous-pages, séparées par des virgules

Recommandations associées :

Deux types de jQuery pour implémenter le Méthode de fonction d'onglet

Explication détaillée de l'onglet du plug-in JavaScript

Code d'implémentation de l'effet d'onglet laui

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js écriture de la méthode d'instance de la barre de progression de la page WebArticle suivant：js écriture de la méthode d'instance de la barre de progression de la page Web

Articles Liés

Voir plus