MUI顶部选项卡的用法

前 言

　MUI是一款最接近原生APP体验的高性能前端框架，它的比较重要的功能是：下拉刷新、侧滑导航、滑动触发操作菜单和顶部(底部)选项卡等

最近用MUI做手机app应用的时候，遇到的小bug。顺便研究了一下这个tab-top-webview-main，这里给大家分享一下。

1主页代码

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

2子页代码

!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代码解释

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、子页选项卡的超链接a的data-wid=""属性需要设置为对应子页选项卡路径。

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

　　2、这里，new webviewGroup("tab-top-webview-main.html",{ } ) 第一个参数需要传入一个页面的id。需要注意的是，这个页面id 就是我们包含顶部选项卡的页面，也就是当前我们这段js所在的页面

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

　　3、 items数组中传入的是子页对应选项卡该导入的子页面的id，有几个子页就添加几个子页，中间用逗号分隔

以上就是MUI顶部选项卡的用法的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！