apicloud中的常用的小知识点

最新推荐文章于 2020-02-25 14:41:04 发布

1登峰造极

最新推荐文章于 2020-02-25 14:41:04 发布

阅读量889

点赞数 3

分类专栏： css html apicloud

本文链接：https://blog.csdn.net/qq_33323469/article/details/86537597

版权

html 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

apicloud

8 篇文章 0 订阅

订阅专栏

1.确认框

    api.confirm({
                    title: '退出',
                    msg: '点击确定退出程序',
                    buttons:['确定', '取消']
                },function(ret,err){
                    if(ret.buttonIndex == 1){
                       alert('sd')
                    }
                });

2.toast弹窗

 api.toast({
     msg: '网络错误',
     duration: 3000,
     location: 'bottom'
 });

3.加载框

  api.showProgress({
                            style: 'default',
                            title: '正在上传中...',
                            text: 10+ '%',
                            modal: true
                        });
 加载完成掉用关闭
 api.hideProgress();

4.缓存读取设置清除

$api.setStorage('name','key');//设置
$api.getStorage('name');//获得指定name的值
$api.rmStorage('name');//清除指定name的值
$api.clearStorage();//清楚全部本地数据

5.头部自动适应手机的状态栏不挡住状态栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        html,
        body {
            width: 100%;
            font-family: PingFang-SC-Medium;
        }
        .topbar {
            width: 100%;
            height: 45px;
            background: #f8f8f8;
            border-bottom: 1px solid #e4e4e4 !important;
            overflow: hidden;
        }
        .topbar .box1 {
            width: 15%;
            height: 45px;
            float: left;
        }
        .topbar .box1 .back {
            width: 11px;
            height: 20px;
            margin-top: 13px;
            margin-left: 17px;
        }
        .topbar .box1 .back img {
            width: 100%;
            height: 100%;
        }
        .topbar .box2 {
            width: 70%;
            height: 45px;
            float: left;
        }
        .topbar .box2 p{
          text-align: center;
          line-height: 45px;
          font-size: 17px;
          color: #000000;
          font-weight: bold;
        }
        .topbar .box3 {
            width: 15%;
            height: 45px;
            float: left;
        }
        .topbar .box3  .serch{
          width: 20px;
          height: 15px;
          margin-top: 17px;
          margin-left: 6px;
        }
        .topbar .box3  .serch img{
          width: 100%;
          height: 100%;
        }
    </style>
</head>
<body>
        <div class="topbar" id='titlebox'>
            <div class="box1">
                <div class="back" onclick="closeWin()">
                    <img src="../../image/courseback.png" alt="">
                </div>
            </div>
            <div class="box2" >
                <p id='name'>我的列表</p>
            </div>
            <div class="box3">
              <div class="serch" onclick="serchinfo()"></div>
            </div>
        </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/apiCloud.js"></script>
    <script>
        apiready = function() {
        //主要代码
            var header = document.getElementById('titlebox');
            $api.fixStatusBar(header);            
        }
    </script>
</body>
</html>

6.app一般页面一般有个头部页面和下面的内容页面，建议写在两个页面，
比如index.html页面如果头部页面和内容页面全部写在一个页面，当内容大于手机屏幕，向上滚动就会压住手机状态栏，
所以建议头部内容写在两个页面结构index.html是头部index_body.html是内容页面
让打开index.html的时候自动加载下面的Frame index_body.html页面
index_body.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
        html,
        body {
            width: 100%;
            font-family: PingFang-SC-Medium;
        }
        .topbar {
            width: 100%;
            height: 45px;
            background: #f8f8f8;
            border-bottom: 1px solid #e4e4e4 !important;
            overflow: hidden;
        }
     
    </style>
</head>
<body>
        <div class="topbar" id='titlebox'>
            里面写标题和返回按钮样式根据要求自定义
        </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/apiCloud.js"></script>
    <script>
        apiready = function() {
        // 适配状态栏
            var header = document.getElementById('titlebox');
            $api.fixStatusBar(header);
             var parms = api.pageParam;
            //自动加载内容页面
            api.openFrame({
                name: 'index_body',
                url: './index_body.html',
                rect: {
                  x: 0,
                  y: api.safeArea.top+46, //后面的数字可以自己调整 就是头部导航的高度 往上走1-//2个像素
                  w: 'auto',
                  h: 'auto'
                },
            });
        }
    </script>
</body>
</html>

index_body.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <style>
     
    </style>
</head>
<body>
        <div>
            <ul>
				<li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>
				<li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>
				<li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>
				<li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>
				<li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>
				 <li>111111</li>    <li>111111</li>    <li>111111</li>    <li>111111</li>         <li>333333</li>
          </ul>
        </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/apiCloud.js"></script>
    <script>
        apiready = function() {
      
        }
    </script>
</body>
</html>

当内容页面超过手机屏幕的时候，下面的内容只会往标题下面往上移动
如图

在这里插入图片描述

1登峰造极

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
apicloud中的常用的小知识点

1.确认框 api.confirm({ title: '退出', msg: '点击确定退出程序', buttons:['确定', '取消'] },function(ret,err){ if(ret.b...
复制链接

扫一扫