有的朋友可能对于“MUI顶部选项卡的用法 顶卡的用法”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

前 言

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

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

1主页代码

        
        
        
            .d1{
                width: 100%;
                height: 50px;
                text-align: center;
                line-height: 50px;
                background-color: #CCCCCC;
                
            }
        
    
    
        
我是p1,下面是插入的子页面
  
        
    
    
    
        mui.init({
            subpages:[{                //下边是初始化，然后这个页面显示我们将插入的页面                
            url:"tab-top-webview-main.html",
                id:"tab-top-webview-main.html",
                styles:{
                    top:"50px",
                    bottom:"0px"
                }
            }]
        })

2子页代码

        
        
        
        
    

    
        

            

                

                    

                        推荐                        
                        
                            热点                        
                    
                
            
        
        
        
        
            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");
            }

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=””属性需要设置为对应子页选项卡路径。

推荐

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

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

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

以上就是“MUI顶部选项卡的用法 顶卡的用法”的详细内容，更多请关注77isp云服务器技术网其它相关文章！