畅哥科技
畅哥科技
  • 发布:2023-08-09 19:02
  • 更新:2023-08-09 19:02
  • 阅读:233

【跨平台问题】底栏安卓正常,苹果会挤压或者被页面覆盖

分类:HTML5+
<!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>  
        <script src="js/mui.min.js"></script>  
        <script src="js/mui.js"></script>  
        <link href="css/mui.min.css" rel="stylesheet" />  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
        </script>  
        <style>  
            * {  
                touch-action: none;  
            }  
        </style>  
    </head>  
    <body>  
        <!-- 顶部导航栏 -->  

        <!-- 底部导航栏 -->  
        <nav class="mui-bar mui-bar-tab myfooter">  
            <!-- mui-active 激活元素,点击的时候会变成蓝色,并且自动添加出mui-active -->  
            <a class="mui-tab-item mui-active" id="btn" href="./pages/index.html">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" id="btn1" href="./pages/file.html">  
                <span class="mui-icon mui-icon-list"></span>  
                <span class="mui-tab-label">文件</span>  
            </a>  
            <a class="mui-tab-item" id="btn2" href="./pages/test.html">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">测试</span>  
            </a>  
            <a class="mui-tab-item" id="btn3" href="./pages/jingyan.html">  
                <span class="mui-icon mui-icon-chat"></span>  
                <span class="mui-tab-label">经验</span>  
            </a>  
            <a class="mui-tab-item" id="btn4" href="./pages/user.html">  
                <span class="mui-icon mui-icon-contact"></span>  
                <span class="mui-tab-label">用户</span>  
            </a>  
        </nav>  
    </body>  

    <script>  
        var subpage = [  
            "./pages/index.html",  
            "./pages/file.html",  
            "./pages/test.html",  
            "./pages/jingyan.html",  
            "./pages/user.html",  
        ];  
        mui.plusReady(function() {  
            var currentWebview = plus.webview.currentWebview();  
            for (var i = 0; i < 5; i++) {  
                var sub = plus.webview.create(subpage[i], subpage[i], {  
                    top: "0px",  
                    bottom: "50px",  
                });  
                currentWebview.append(sub);  
                if (i > 0) {  
                    sub.hide();  
                }  
            }  
        });  

        mui(".myfooter").on("tap", "a", function() {  
            // alert(this.href);  
            var currentActiveTab = this.getAttribute("href");  
            if (currentActiveTab == mui(".mui-active")[0].getAttribute("href")) {  
                return;  
            }  
            plus.webview.hide(mui(".mui-active")[0].getAttribute("href")); // 隐藏  
            plus.webview.show(currentActiveTab); // 显示  
        });  
    </script>  
</html>

这是我的代码。这段代码生成的底栏5+APP 打包后,安卓平台可以正常使用,而苹果平台会出现挤压情况。这是怎么回事?

2023-08-09 19:02 负责人:无 分享
已邀请:

要回复问题请先登录注册