mui选项卡

极速创建

【文件】->【新建】->【HTML文件】，然后在弹出窗口下面的“选择模板组：”中选中“mui底部选项卡（Webview模式）”。点击完成，就会自动创建一个带有默认页面的模板。

打开tab-webview-main.html可以在右侧看到已经创建了一个有底部选项卡的主页面。再浏览其它页面可以看到各个页面的内容。但是在右侧的web浏览器中点击选项卡的话，只是顶部标题文字变了，内容是空白的，这时候看到控制台中的错误信息：

[Web浏览器] “Uncaught ReferenceError: plus is not defined (提示: plus api只能在手机app里运行)”

真机调试

也就是说想看到点击效果，必须在安卓设备上运行。Hbuilder中可以支持真机调试，用自己的手机开启调试，然后连接到电脑后（要各种助手软件能检测到）可以在菜单栏的【运行】->【手机运行】下看到连接到的手机。直接点击就可以运行了。

如果手机连接很麻烦，这时候可以用安卓模拟器进行调试，我调试用的是天天模拟器，打开模拟器之后，控制台输入adb connect 127.0.0.1:6555，然后等待约5秒就可以在菜单中找到安卓模拟器了。这里的6555是天天模拟器的端口，详细关于安卓模拟器调试，请看我的另一篇文章：http://blog.csdn.net/anjingshen/article/details/74085075

一切就绪后，点击【在XX设备上运行my项目】，就可以在安卓上看到启动了一个Hbuilder的程序，但是出来的是hello world，并不是带选项卡的首页，可以在manifest.json中设置【页面入口】选项，设置为tab-webview-main.html，保存，在此启动app就可以看到效果了。

点击各个选项卡，初次加载是fade-in淡入动画，再次加载就直接显示了。

页面分析

会到Hbuilder，查看新增加的五个文件。可以看到，选项卡在tab-webview-main.html文件中，其他各个页面内容不同，共用这个选项卡。拿首页（about）页面来说，实际上是把由tab-webview-main.html和tab-webview-subpage-about.html组合而成的。

这里其使用到的是mui中的子页面技术。父页面tab-webview-main.html，其他几个页面可以通过父页面切换。

考虑到性能和效果等因素，如果希望把一个页面拆分成两个或多个页面的话，就应该使用子页面。

为方便起见，我们把这些文件重命名，tab-webview-main.html改成main.html，其他几个去掉tab-webview-subpage-前缀。

打开main.html文件，看到html部分就是一个header和底部选项卡nav标签。

再看js部分。第一行是调用mui的init初始化页面：

mui.init();
1

这里在每个页面都必须调用一次，主要是mui的绑定事件等初始化工作。

var subpages = ['tab-webview-subpage-about.html', 'tab-webview-subpage-chat.html', 'tab-webview-subpage-contact.html', 'tab-webview-subpage-setting.html'];
1

这里把所有子页面的地址保存起来了，由于改变了文件名，这里也要做相应改变。

var subpages = ['about.html', 'chat.html', 'contact.html', 'setting.html'];
1

接下来定义的subpage_style是子页面的样式，在后面用到的，这里先不用管。

//创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {
    var self = plus.webview.currentWebview();
    for (var i = 0; i < 4; i++) {
        var temp = {};
        var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
        if (i > 0) {//不是第一个就隐藏
            sub.hide();
        }else{//第一个不隐藏，并且在标志数组中记录下来。
            temp[subpages[i]] = "true";
            mui.extend(aniShow,temp);
        }
        self.append(sub);//加入子页面
    }
});
123456789101112131415

上面是调用了mui的plusReady函数，并传递了一个回调函数。
在app开发中，若要使用HTML5+扩展api，比如打开新页面openWindow，显示遮罩层showWaiting等，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。关于事件的详细内容，看这里：http://www.html5plus.org/doc/zh_cn/events.html

回到上面的代码，里面的回调函数会在页面初始化完后执行。看下函数里面，第一行是得到当前页面对象（WebviewObject）。

跟plus.webview.currentWebview统一层的还有create, show, open, hide, close, showWaiting, closeWaiting 等界面相关的操作。

上面我们说道，main是主页面，其他四个是它的子页面，添加子页面有两种方式，一种是调用webview对象的append方法，另一种是在init函数中传入配置项，详见：http://dev.dcloud.net.cn/mui/window/#subpage。

这里采用的是第一种方法append。先遍历subpages数组，显示第一个，隐藏其他几个，这里谁隐藏了，谁没有隐藏，还需要aniShow这个字典记录，显示的就把响应的键置为"true"。

这时候页面就会默认显示about.html页面，但是点击选项卡并不会切换，因为没有为他们监听事件。

//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
    var targetTab = this.getAttribute('href');
    if (targetTab == activeTab) {
        return;
    }
    //更换标题
    title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
    //显示目标选项卡
    //若为iOS平台或非首次显示，则直接显示
    if(mui.os.ios||aniShow[targetTab]){
        plus.webview.show(targetTab);
    }else{
        //否则，使用fade-in动画，且保存变量
        var temp = {};
        temp[targetTab] = "true";
        mui.extend(aniShow,temp);
        plus.webview.show(targetTab,"fade-in",300);
    }
    //隐藏当前;
    plus.webview.hide(activeTab);
    //更改当前活跃的选项卡
    activeTab = targetTab;
});
123456789101112131415161718192021222324

事件监听可以用原生JavaScript，也可以用jquery，但是官方不推荐jquery，太重量级了，对app性能是一个巨大损耗。

这里可以为每个tab设置id，然后分别写监听，不过显然比较麻烦。也可以用document.querySelector(‘.mui-bar-tab a’).addEventListener监听，不过用官方包装后的mui(‘.mui-bar-tab’).on函数显然更方便，on函数三个参数分别是【事件名称】，【子元素】，【绑定函数】。

注意：这里的事件名是tap而不是click，因为click事件有默认300ms延迟。

这里通过href属性获取子页面url。【href属性也需要改文件名】，然后判断点击的页面和当前显示的页面是否相同，如果相同就直接退出，这里不判断的话，会出现点击两次白屏的效果。

然后更新标题，判断是否已经显示过了，如果显示过aniShow[url]为'true'，页面已经加载过，可以直接显示，不需要过渡动画。如果页面没有显示过，通过plus.webview.show 方法显示，这里的"fade-in"，参数表示用淡入动画。【注意：子页面只支持淡入动画】，其他如”slide-in-right”都无效，会有闪屏现象，体验很差。

然后是将上一个webview隐藏，记录当前webview的url。

 //自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {
    var defaultTab = document.getElementById("defaultTab");
    //模拟首页点击
    mui.trigger(defaultTab, 'tap');
    //切换选项卡高亮
    var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
    if (defaultTab !== current) {
        current.classList.remove('mui-active');
        defaultTab.classList.add('mui-active');
    }
});
123456789101112

最后是一个自定义页面事件，干什么用呢？如果其他页面想直接返回首页怎么办？找到main对应的webview然后show显示，显示的不一定是首页啊，因为activeTab有可能是通讯录、设置、消息。找到about的webview然后show嘛？更不行啊，这样就没选项卡了。所以这就涉及到页面间传值了。关于这部分可以看这篇文章：http://dev.dcloud.net.cn/mui/event/#customevent

--------------------- 本文来自 景影随形 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/anjingshen/article/details/74138717?utm_source=copy