Verwendung der oberen MUI-Registerkarte-H5-Tutorial-php.cn

Verwendung der oberen MUI-Registerkarte

一个新手

Freigeben： 2017-10-13 09:39:12

Original

4227 Leute haben es durchsucht

Vorwort

Ein leistungsstarkes Front-End-Framework, das dem nativen APP-Erlebnis am nächsten kommt Wichtige Funktionen sind: Pulldown-Aktualisierung, seitlich verschiebbare Navigation, verschiebbares Trigger-Bedienmenü und obere (untere) Registerkarten usw.

Vor Kurzem bin ich bei der Verwendung von MUI auf einen kleinen Fehler gestoßen eine mobile App erstellen. Übrigens habe ich dieses Tab-Top-Webview-Main studiert und werde es hier mit Ihnen teilen.

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>

Nach dem Login kopieren

Unterseitencode

<!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>

Nach dem Login kopieren

Code-Erklärung

1. Superansicht der Unterseite tab Das data-wid=""-Attribut von Link a muss auf den entsprechenden Unterseiten-Tab-Pfad gesetzt werden.

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

Nach dem Login kopieren

2. Hier muss new webviewGroup("tab-top-webview-main.html",{}) der erste Parameter an eine Seite übergeben werden Ausweis. Es ist zu beachten, dass diese Seiten-ID die Seite ist, die den oberen Tab enthält, also die Seite, auf der sich unser js derzeit befindet

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

Nach dem Login kopieren

3. In den Artikeln array Was übergeben wird, ist die ID der importierten Unterseite, die der Unterseite entspricht. Wenn es mehrere Unterseiten gibt, fügen Sie mehrere Unterseiten hinzu, getrennt durch Kommas

Das obige ist der detaillierte Inhalt vonVerwendung der oberen MUI-Registerkarte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!