apicloud中的常用的小知识点

16 篇文章 0 订阅
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>

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

在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1登峰造极

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值