Home > Article > Web Front-end > Usage of MUI top tabs

Usage of MUI top tabs

一个新手Original: 2017-10-13 09:39:124244browse

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>

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

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>

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

　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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of angular's $watch methodNext article：Detailed explanation of angular's $watch method

See more

Usage of MUI top tabs

Related articles