1608735578@qq.com
1608735578@qq.com
  • 发布:2018-03-02 17:02
  • 更新:2019-10-25 17:41
  • 阅读:3726

mui底部不能适配iPhonex

分类:MUI

代码<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title></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">  
    <meta name="viewport" content="width=device-width, viewport-fit=cover">  
    <link rel="stylesheet" href="//ask.dcloud.net.cn/css/mui.min.css">  
    <style>  
        html,  
        body {  
            background-color: #efeff4;  
        }  

        @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {  
          .mui-bar-tab {  
            margin-bottom: constant(safe-area-inset-bottom);  
            margin-bottom: env(safe-area-inset-bottom);  
          }  
        }   
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <h1 id="title" class="mui-title">庄园</h1>  
    </header>  
    <nav class="mui-bar mui-bar-tab">  
        <a id="defaultTab" class="mui-tab-item mui-active" href="//ask.dcloud.net.cn/mgzy.html">  
            <span class="mui-icon mui-icon-home"></span>  
            <span class="mui-tab-label">庄园</span>  
        </a>  
        <a class="mui-tab-item" href="//ask.dcloud.net.cn/mgxx.html">  
            <span class="mui-icon mui-icon-email"><!--<span class="mui-badge">9</span>--></span>  
            <span class="mui-tab-label">消息</span>  
        </a>  
        <a class="mui-tab-item" href="//ask.dcloud.net.cn/mggz.html">  
            <span class="mui-icon mui-icon-contact"></span>  
            <span class="mui-tab-label">关注</span>  
        </a>  
        <a class="mui-tab-item" href="//ask.dcloud.net.cn/mgwd.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">  
        //mui初始化  
        mui.init();  
        var subpages = ['mgzy.html', 'mgxx.html', 'mggz.html', 'mgwd.html'];  
        var subpage_style = {  
            top: '45px',  
            bottom: '51px'  
        };  

        var aniShow = {};  

        //创建子页面,首个选项卡页面显示,其它均隐藏;  
        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);  
            }  
        });  
        //当前激活选项  
        var activeTab = subpages[0];  
        var title = document.getElementById("title");  
        //选项卡点击事件  
        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;  
        });  
        //自定义事件,模拟点击“首页选项卡”  
        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');  
            }  
        });  
    </script>  
</body>  

</html>

2018-03-02 17:02 2 条评论 分享
已邀请:
zhang_yi_sheng@163.com

zhang_yi_sheng@163.com

【官方解答】http://ask.dcloud.net.cn/article/35564

菠萝momo

菠萝momo

请问是怎么解决的?

  • gs_wenbing@sina.com

    详细demo示例参考:https://github.com/gs-wenbing/mui-mall

    2019-10-25 17:23

gs_wenbing@sina.com

gs_wenbing@sina.com

//iphoneX中出现遮挡底部tab现象,采用js判断屏幕大小方式改变bottom值  
//isIPhoneX() 要在后调用  
if (isIPhoneX()) {  
    subpage_style = {  
        top: '0px',  
        bottom: '88px',   
        styles: {  
            "render": "always", //一直渲染  
        }  
    };  
}

在mui.js 中添加如图

详细demo示例参考:https://github.com/gs-wenbing/mui-mall

402213939@qq.com

402213939@qq.com

判断是iphonex的时候另外设置bottom

要回复问题请先登录注册