Usage of MUI top tabs-H5 Tutorial-php.cn

Usage of MUI top tabs

一个新手

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

Original

4246 people have browsed it

Preface

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

Subpage code

##
<!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 login
3

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.

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

Copy after login

　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", {}

Copy after login

　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!