【apicloud】沉浸式解决方案

翻滚的胖子
2019-10-12 22:56:26
APP开发
APICloud

apicloud论坛发现的沉浸式解决方案，适配各种手机，收藏一波。感谢筦陶

<!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 rel="stylesheet" type="text/css" href="../../css/commom.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../icon/iconfont.css"/>
</head>
<style type="text/css">
        .mui-bar{
                background-color: #fff;
        }
        .mui-bar .mui-title{
                color: #333;
        }
        .mui-action-back{
                color: #FFFFFF;
        }
</style>
<body>
        <div class="all" id="app">
                <header class="header 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>
                <div class="main"></div>
        </div>
        <script src="../../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        var apiready = function(){
                                var vm =new Vue({
                                        el:'#app',
                                        data:{},
                                        methods:{},
                                        created:function(){},
                                        mounted:function(){
                                                immersion();
                                                
                                        }
                                })
                        }
function immersion() {
        if(api.statusBarAppearance) {
                var $header = $('.header');
                var height = $header.innerHeight();
                var safeArea = api.safeArea.top;
                height += safeArea;
                $header.css('height', height);
                $('.main').css('margin-top', height);
                $api.fixStatusBar($header[0]);
        }

}


        </script>
</body>
</html>

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com