Utilisation des onglets supérieurs de MUI-Tutoriel H5-php.cn

Utilisation des onglets supérieurs de MUI

一个新手

Libérer： 2017-10-13 09:39:12

original

4226 Les gens l'ont consulté

Pré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

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

Copier après la connexion

Code de 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">
    </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>

Copier après la connexion

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

Copier après la connexion

　2. Ici, new webviewGroup("tab-top-webview-main.html",{}) Le premier paramètre doit être passé dans une page identifiant. 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

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

Copier après la connexion

3. Dans les éléments array Ce qui est transmis est l'identifiant de la sous-page importée correspondant à la sous-page. S'il y a plusieurs sous-pages, ajoutez plusieurs sous-pages, séparées par des virgules

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!