MUI顶部选项卡的用法

前端开发教程 2025-01-11 0

前言

　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顶部选项卡的用法的详细内容，更多请关注云资源网其它相关文章！

原文链接：https://www.sudo1.com

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。