APICloud成长记录 二 页面框架搭建调整

最新推荐文章于 2022-03-23 22:03:09 发布
VIP文章 最新推荐文章于 2022-03-23 22:03:09 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： APICloud混合式移动开发 文章标签： APICloud混合式移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35932345/article/details/52312388
版权 
<span style="font-family:Microsoft YaHei;font-size:14px;"></span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
    html,
            body {
                height: 100%;
                background-color: #f0f0f0;
            }
            
            body {//盒子布局
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-orient: vertical;//纵向布局
                -webkit-flex-flow: column;
                flex-flow: column;
            }
    //头部开始
    .header-outer {
                width: 100%;
                height: auto;
            }
            
            .header-item {
                position: relative;
                display: none;
            }
            
            .header-item-act {
                display: block;
            }
            
            header>div:nth-child(1) {
                position: relative;
                background-color: rgb(255, 132, 0);
                height: 50px;
            }
            
            header>div:nth-child(2) {
                position: relative;
                height: 50px;
                background-color: rgb(252, 252, 252);
            }
            
            header>div:nth-child(3) {
                position: relative;
                height: 50px;
                background-color: rgb(252, 252, 252);
            }
            /* header home */
            
            .home-citylist {
                float: left;
                height: 50px;
                line-height: 50px;
                color: #fff;
                font-size: 14px;
                margin-left: 15px;
            }
            
            .home-citylist>img {
                height: 20px;
                vertical-align: top;
                padding-top: 15px;
            }
            
            .home-search {
                position: absolute;
                bottom: 8px;
                left: 90px;
                right: 60px;
                height: 34px;
                line-height: 34px;
                background-color: rgb(250, 102, 4);
                border-radius: 34px;
                color: rgb(253, 194, 155);
                font-size: 14px;
            }
            
            .home-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            
            .home-msg {
                float: right;
            }
            
            .home-msg>img {
                height: 28px;
                padding-top: 11px;
                vertical-align: top;
                padding-left: 15px;
                padding-right: 15px;
            }
            /* header groupbuy */
            
            .groupbuy-citylist {
                float: left;
                height: 50px;
                line-height: 50px;
                color: rgb(255, 132, 0);
                font-size: 18px;
                margin-left: 15px;
            }
            
            .groupbuy-citylist>img {
                height: 15px;
                vertical-align: top;
                padding-top: 18px;
            }
            
            .groupbuy-search {
                position: absolute;
                bottom: 8px;
                left: 110px;
                right: 15px;
                height: 34px;
                line-height: 34px;
                background-color: rgb(232, 232, 232);
                border-radius: 34px;
                color: rgb(153, 153, 153);
                font-size: 14px;
            }
            
            .groupbuy-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            /* header search */
            
            .find-search {
                position: absolute;
                bottom: 8px;
                left: 15px;
                right: 60px;
                height: 34px;
                line-height: 34px;
                border-radius: 34px;
                background-color: rgb(232, 232, 232);
                color: rgb(153, 153, 153);
                font-size: 14px;
            }
            
            .find-search>img {
                height: 20px;
                padding-top: 7px;
                padding-left: 10px;
                padding-right: 10px;
                vertical-align: top;
            }
            
            .find-scanner {
                float: right;
                width: 50px;
                background: url(./image/header/qrcode_search.png) no-repeat center 6px;
                background-size: auto 24px;
                padding-top: 33px;
                color: rgb(153, 153, 153);
                font-size: 12px;
                text-align: center;
            }
            
            .find-scanner-hov {
                background-color: #ddd;
            }
    .place-holder{/*中间给其沾满空间*/
    width:100%;
    -webkit-box-flex: 1;
    -webkit-flex:1;
    flex:1;
    background-color:#3352CC;
    }
    /*给页脚盒子布局*/
    .footer{
    display:-webkit-box;
    display:-webkit-flex;
    -webkit-box-orient : horizontal;/*横向布局*/
    -webkit-flex-flow : row;
    flex-flow : row;
    width:100%;
    height :60px;
    background-color:red;
    }
    .footer .menu{
    box-sizing:border-box;
    padding-top:42px;
    padding-bottom:5px;
    -webkit-box-flex: 1;
    -webkit-flex:1;
    flex:1;
    height:60px;
    text-align:center;
    font-size:13px;
   
    background-size:30px 30px;
    background-position:center 6px;
    background-repeat:no-repeat;
    }
   
    .footer .home{
    background-image :url(../image/footer/home.png);
    }
    .footer .home.active{
    background-image :url(../image/footer/home_act.png);
    }
    .footer .groupbuy{
    background-image :url(../image/footer/groupbuy.png);
    }
    .footer .groupbuy.active{
    background-image :url(../image/footer/groupbuy_act.png);
    }
    .footer .find{
    background-image :url(../image/footer/find.png);
    }
    .footer .find.active{
    background-image :url(../image/footer/find_act.png);
    }
    .footer .my{
    background-image :url(../image/footer/my.png);
    }
    .footer .my.active{
    background-image :url(../image/footer/my_act.png);
    }
   
    .header{
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-flow:row;
    flex-flow:row;
    }
    </style>
</head>
<body>
<header id="header" class="header-outer">
            <div class="header-item header-item-act" id="home">
                <div class="home-citylist open-win" win="html/citylist">
                    <span class="currentCity">武汉</span>
                    <img src="../image/header/arrow_down_home.png">
                </div>
                <div class="home-search open-win" win="html/search">
                    <img src="../image/header/search_home.png">
                    <span>输入商户名、地点</span>
                </div>
                <div class="home-msg open-win" win="html/message">
                    <img src="../image/header/msg_home.png">
                </div>
            </div>
            <div class="header-item" id="groupbuy">
                <div class="groupbuy-citylist open-win" win="html/citylist">
                    <span class="currentCity">北京</span>
                    <img src="../image/header/arrow_down_groupbuy.png">
                </div>
                <div class="groupbuy-search open-win" win="html/search">
                    <img src="../image/header/search_groupbuy.png">搜索团购...
                </div>
            </div>
            <div class="header-item" id="find">
                <div class="find-search open-win" win="html/search">
                    <img src="../image/header/search_groupbuy.png"> 输入商户名、地点
                </div>
                <div class="find-scanner" tapmode="highlight" οnclick="fnOpenScanner()">
                    扫一扫
                </div>
            </div>
            <div class="header-item" id="my">
            </div>
        </header>
<div class="place-holder"></div>
<footer id="footer" class="footer">
<div class="menu home active" tapmode οnclick="showContent(0)">首页</div>
<div class="menu groupbuy" tapmode οnclick="showContent(1)">团购</div>
<div class="menu find" tapmode οnclick="showContent(2)">发现</div>
<div class="menu my" tapmode οnclick="showContent(3)">我的</div>

</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
init();
showContent(0);
};

var headers, menus,headerHeight,footerHeight;
function init(){
var header = $api.byId('header');
footer = $api.byId('footer');
headers = $api.domAll(header, '.header-item');//头部元素获取
//$api.fixIos7Bar(header);
最低0.47元/天 解锁文章
流浪蓝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
apicloud开发记录手册
10-29
https://blog.csdn.net/AnoiaDream/article/details/83502894 对应的文档
2-apicloud-上拉加载，下拉加载
weixin_44012573的博客
04-28 444
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=dev...
【APICloud】选项卡切换万用js函数
BobbleHat的博客
06-20 1163
    之前自己做项目的时候遇到过这个问题，现在想起来就传上来了^-^    因为项目需求，标签的个数和具体的选项个数都是后台可改变的，所以需要用万用的函数解决标签切换的问题，得益于apicloud的出色设计，最后抠出来了这个方案，简单的例子是这样的（3x4的例子  PS：这里所有的标签和选项的个数和名称以及简介都需要可更换）HTML代码：&lt;div class="frame_2"&gt; ...
APICloud开发小技巧（二）
weixin_30562507的博客
04-10 66
1、apicloud中 json、字符串之间的互转 $api.jsonToStr(ret); $api.strToJson(ret) 2、页面的来回跳转 例如已经打开了一个页面，跳转走，改变数据在跳转回来，这个时候数据是默认不变化的打开的是历史，想要清除历史 api.openWin({ name : 'addAddress', ...
APICloud 实现 使用openFrameGroup引入页面后禁止上下滑动
Lik1024
08-18 1117
function funIniGroup(){ var eHeaderLis = $api.domAll('header li'), frames = []; for (var i = 0,len = eHeaderLis.length; i < len; i++) { frames.push( { ...
APICloud开发指南之$api
热门推荐
fanblog的博客
09-03 2万+
目录  [隐藏]  1 遍历2 属性操作3 文档操作4 CSS操作5 数据操作6 事件7 AJAX8 效果9 设备适配 遍历[编辑源代码] .dom() 描述：选择首个匹配的DOM元素 用法一：.dom(el, selector) 从el元素开始查找 用法二：.dom(selector) 从document元素开始查找 参数： el (类型
APICloud的学习成长之路(二)
06-17
APICloud的学习成长之路(二)，分享学习思路和感悟
Apicloud H5考勤打卡页面
01-10
该资源是使用H5写的考勤打卡页面，页面样式参考了钉钉。基于Apicloud集成BMap实现了考勤打卡定位功能
HybridStart基于apicloud的混合应用开发框架
08-10
HybridStart 基于apicloud的混合应用开发框架，可能是开发这一类混合应用的最佳实践。
apicloud三个页面搞定app搜索
01-15
贴合apicloud 利用三个页面实现上传 不同分类进行切换筛选
APICloud进行窗口和页面操作
python_web全栈
03-23 4401
1. 方式一windows窗口 1.1 介绍 window是APICloud提供的最顶级的页面单位.一个APP至少会存在一个以上的window窗口,在用户打开APP应用，应用在初始化的时候，默认就会创建了一个name=root 的顶级window窗口，显示当前APP配置的首页。 新建window窗口。 注意: 如果之前已经存在同名的窗口,则APP不会再次创建新窗口,而是显示对应名称的窗口。 1.2 代码示例 <li><img class="module4" @click="l
APICloud框架——总结一下最近开发APP遇到的一些问题
Mr.Yuan
05-20 4177
距离上一次发文都过去十天了, 下班回来懒的就想睡觉, 今天520一个重要的节日, 恩爱已经秀完, 该干点事情了！！ 总结一下最近开发遇到的一些问题, 以及解决方案纯css三角形/* 没有哪个方向的边框, 三角形就朝向那边 */ width: 0; height: 0; border-top: .5rem solid transparent; border-left: 1rem solid red;
apicloud api.openwin
diaonv9164的博客
06-07 1409
简单介绍api.openWin: 打开window 若window已存在，则会把该window显示到最前面，同时若url有变化或者reload参数为true时，页面会重新加载。若当前正在进行openWin、closeWin等带动画过渡的window操作，调用此方法会失效。 openWin({params});简单示例如下： api.openWin({ ...
APICloud方法
若末lan的博客
05-14 3122
转载于官网      https://docs.apicloud.com/Front-end-Framework/framework-dev-guide#1                                                                                                                          ...
一、apicloud 获取属性
博客园: https://www.cnblogs.com/fger/
08-05 4657
一、设值 &amp;amp;amp;lt;input class=&amp;amp;quot;same big-icon aui-checkbox&amp;amp;quot; data-prices=&amp;amp;quot;{{=it[i].children[j].goodsprices}}&amp;amp;quot; value=&amp;amp;quot;{{=it[i].children[j].goodsid}}&amp;amp;
apicloud命名空间$api方法集合
weixin_41756610的博客
06-12 749
命名空间为api,所有方法如下（摘自官网https://docs.apicloud.com/Front−end−Framework/framework−dev−guide）；1、api,所有方法如下（摘自官网https://docs.apicloud.com/Front-end-Framework/framework-dev-guide）； 1、api,所有方法如下（摘自官网https://doc...
命名空间为 $api ，所有方法如下：
yxlyy0909的博客
11-21 155
Method .trim() .trimAll() .isArray() .addEvt() .rmEvt() .one() .dom() .domAll() .byId() .first() .last() .eq() .not() .prev() .next() .contains() .closest() .remove() .attr() .removeAttr() .hasCls(...
apicloud中多个按钮的切换
rosener的博客
08-21 4404
如上图：话不多说，贴代码             限时特卖    -->                  #bgcolor{     background-color: #f3f3f3;     }       #temai{       height: 40px;       width: 100%-20px;       background
APICloud APP前端框架——手机APP开发、APP制作、APP定制平台
weixin_30326515的博客
02-17 320
概述 APICloud前端框架，包括api.js和api.css。api.css处理不同平台浏览器的默认样式。api.js是一个JavaScript库。是APICloud为混合移动开发定制的轻量JavaScript库。具有小巧高效的特性。很容易学习和使用。使用APICloud前端框架需引入api.js和api.css文件。api.js,api.css在创建APICloud项目时自动创建。 开源...
apicloud 怎么跳转到页面顶部
最新发布
05-25
你可以在页面中添加一个按钮或者其他触发事件的元素，然后使用 JavaScript 来实现页面跳转到顶部的功能。具体实现如下： 1. 给触发事件的元素添加点击事件监听器： ```javascript document.getElementById('btn-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值