MUI-tab两种实现方式

墨蓝 2022-01-14 00:37 419阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

底部选项卡tab有两种实现方式，一种是用js另一种是原生的

一、js实现方式：首先先建1个首页和几个子页，最后合并而成

![152133_0x63_2612473.jpg][]

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>
    
    <body>
        
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">首页</h1>
        </header>
        <div>content</div>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="html/home.html">
    				<span class="mui-icon mui-icon-home"></span>
    				<span class="mui-tab-label">首页</span>
    			</a>
            <a class="mui-tab-item" href="html/message.html">
    				<span class="mui-icon mui-icon-chatboxes"></span>
    				<span class="mui-tab-label">消息</span>
    			</a>
            <a class="mui-tab-item" href="html/setting.html">
    				<span class="mui-icon mui-icon-gear"></span>
    				<span class="mui-tab-label">设置</span>
    			</a>
        </nav>
        <script src="js/mui.min.js"></script>
        <script type="text/javascript" charset="utf-8">
        //设置默认打开首页显示的子叶序号
        var Index = 0;
        //把子页的路径写在数组中
        var subpages = ["html/home.html", "html/message.html", "html/setting.html"];
        mui.plusReady(function() {
            //获取当前页面所属的Webview窗口对象
            var self = plus.webview.currentWebview();
            for (var i = 0; i < subpages.length; i++) {
                //创建webview子页
                (function(i) {
                    setTimeout(function() {
                        var wvs = plus.webview.all();
                        console.log(wvs.length);
                        var sub = plus.webview.create(
                            subpages[i], //子页url
                            subpages[i], //子页id
                            {
                                top: "45px",
                                bottom: "50px"
                            }
                        );
                        //如不是我们设置的默认子页则隐藏，否则添加到窗口中
                        if (i != Index) {
                            sub.hide();
                        }
                        //将webview对象填充到窗口,同一个self多次追加子页面，默认只显示最后创建追加的
                        self.append(sub);
                    }, 3000)
                })(i)
    
    
    
    
            }
            //var wvs=plus.webview.all();
            //console.log(wvs.length);
    
        })
        //当前激活选项
        var activeTab = subpages[Index],
            title = document.querySelector(".mui-title");
        //选项卡点击事件
        mui('.mui-bar-tab').on('tap', 'a', function(e) {
            //获取目标子页的id
            var targetTab = this.getAttribute('href');
            if (targetTab == activeTab) {
                return;
            }
            //更换标题
            title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
            //显示目标选项卡
            plus.webview.show(targetTab);
            //隐藏当前选项卡
            plus.webview.hide(activeTab);
            //更改当前活跃的选项卡
            activeTab = targetTab;
        });
        </script>
    </body>
    
    </html>

二、另一种方式是原生方式，首先新建移动app,选择底部选项卡模板，会生成原生控件的底部选项卡模板

原生的模板我们经常需要修改成自己需要的

如果改成3个tab切换，修改步骤

1、manifest.json配置文件plus-launchwebview-subNViews中删除不需要的选项卡（文字与图标都是单独定位的，不是一组组的）

2、js里面的util.js 把i<8 改成 i<6

for(var i = 0; i < 8; i++) \{  
if(i !== currIndex && i !== currIndex + 1) \{  
util.updateSubNView(i, util.options.NORMAL\_COLOR);  
\}  
\}

3、根据判断view控件点击位置判断切换的tab修改成下面的，如果不需要下面的气泡，关于气泡的代码都删除  
nview.addEventListener('click', function(e) \{  
var clientX = e.clientX;  
if(clientX > 0 && clientX <= parseInt(pageW \* 0.33)) \{  
currIndex = 0;  
\} else if(clientX > parseInt(pageW \* 0.33) && clientX <= parseInt(pageW \* 0.67)) \{  
currIndex = 1;  
\} else if(clientX > parseInt(pageW \* 0.67)) \{  
currIndex = 2;  
\}  
// 匹配对应tab窗口  
if(currIndex > 0) \{  
targetPage = plus.webview.getWebviewById(subpages\[currIndex - 1\]);  
\} else \{  
targetPage = plus.webview.currentWebview();  
\}

if(targetPage == activePage) \{  
return;  
\}

//底部选项卡切换  
util.toggleNview(currIndex);  
// 子页面切换  
util.changeSubpage(targetPage, activePage, aniShow);  
//更新当前活跃的页面  
activePage = targetPage;  
  
\});

Hbuilder生成的模板在列表跳转时在列表页面跳转时遇到下面2个错误  
1、 Uncaught ReferenceError: open\_detail is not defined at index.html:2  
解决方法把js最外层的自执行函数删除  
(function() \{  
\})();

2、Uncaught Error: webview\[moive-detail\] does not exist at js/mui.min.js:6  
//预加载页面放到mui.plusReady(function() \{\}里面，plusReady上面var detailPage = null;  
detailPage = mui.preload(\{  
id: "moive-detail",  
url: "./html/moive\_detail.html"  
\});

转载于:https://my.oschina.net/u/2612473/blog/1800398

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/74b254d62b4e48dfb8840d509f22e4d8.png
[152133_0x63_2612473.jpg]: https://static.oschina.net/uploads/space/2018/0424/152133_0x63_2612473.jpg