mui底部选项卡切换页面

时间：2021-06-08 17:08:53

参照官网窗口管理：http://dev.dcloud.net.cn/mui/window/

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度，默认为100%
        height:subpage-height,//子页面高度，默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

创建代码比较简单，如下：

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui标题栏默认高度为45px；
        bottom:'0px'//默认为0px，可不定义；
      }
    }]
  });

其他子页面的新建：选含mui的html，body里写展示内容

 

底部选项卡切换(WebView模式)：

demo1：

<!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" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">标题</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="head.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item"  href="tel.html">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item"  href="email.html">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item"  href="set.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">
            var subpage = [head.html, tel.html,email.html, set.html];//页面存入数组
            var styles = {
                top: 50 px,
                bottom: 51 px
            }
            min.plusReady(function() {
                var hash = plus.webview.currentWebview(); //获取当前窗口
                for(var i = 0; i < hash.length; i++) {
                    //plus.webview.create(url, id, style);
                    var Newpage = plus.webview.create(subpage[i], subpage[i], styles);//创建子页面
                    if(i > 0) {
                        Newpage.hide();//其他页面隐藏
                    }
                    hash.append(Newpage);//当前home页显示
                }
            });
            //点击事件a
            var cativeTab = subpage[0];//默认第一页显示
            //mui('选择器父级').on('tap', '选择器子级', functioin() {});
            mui('.mui-bar').on('tap', 'a', functioin() {
                var targetTab = this.getAttribute('href');//获取属性   href值
                if(targetTab == cativeTab) {
                    return;
                }
                plus.webview.hide(cativeTab);
                cativeTab = targetTab;//值赋
                plus.webview.show(targetTab);
            })
            
        </script>
    </body>

</html>

 

底部选项卡切换(DIV模式)：

<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">底部选项卡切换(Div模式)</h1>
        </header>
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#page1">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="#page2">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item" href="#page3">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item" href="#page4">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        
        
        <div class="mui-content">
            <div id="page1" class="mui-control-content mui-active">
                这是第一个页面
            </div>
            <div id="page2" class="mui-control-content">
                这是第二个页面
            </div>
            <div id="page3" class="mui-control-content">
                这是第三个页面
            </div>
            <div id="page4" class="mui-control-content">
                这是第四个页面
            </div>
        </div>

 

标签：

相关文章