官方案例

1.头部拆分成一个页面比如news-text

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>

    <title>api</title>

    <link rel="stylesheet" type="text/css" href="../css/api.css" />

    <link rel="stylesheet" type="text/css" href="../css/common.css" />

    <link rel="stylesheet" type="text/css" href="../css/news-text.css" />

</head>

<body>

    <div id="wrap">

        <div id="header">

            <a class="back-icon" tapmode="" onclick="api.closeWin()"></a>

            <h1>热点新闻</h1>

        </div>

    </div>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript" src="../script/news-text.js"></script>

</html>

2.内容拆分成另一个页面比如news-textCon

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>

    <title>api</title>

    <link rel="stylesheet" type="text/css" href="../css/api.css" />

    <link rel="stylesheet" type="text/css" href="../css/common.css" />

    <link rel="stylesheet" type="text/css" href="../css/news-text.css" />

</head>

<body>

    <div id="wrap">

        <div id="main">

        	<script id="news-template" type="text/x-dot-template">

                <h1>{{=it.title}}</h1>

                <label>

	                {{? it.from }}

	                	{{=it.from}}

	                {{?}}

	                <em>{{=it.date}}</em>

                </label>

                <div id="summary">

                	{{=it.summary}}

            	</div>

            	<div>

            		{{=it.content}}

            	</div>

            	<a id="fav" class="btn" tapmode="active" news-id="{{=it.id}}" >收藏</a>

            </script>

        	<div id="content"></div>

        </div>

    </div>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript" src="../script/common.js"></script>

<script type="text/javascript" src="../script/doT.min.js"></script>

<script type="text/javascript" src="../script/zepto.js"></script>

<script type="text/javascript" src="../script/news-textCon.js"></script>

</html>

以上就是一个非常规范的内容

1.css在头部

引入必要的css，api.css

引入通用的css，common.css

引入页面特有的css，news-text.css

2.js在尾部

引入必要的css，api.js

引入通用的css，common.js

引入页面特有的css，news-text.js

根据页面需要，引入doT模板和zepto（手机端的jQuery替代品）

来看看news-text.js中的内容



apiready = function(){

    var header = $api.byId('header'); // 获取头部

    $api.fixStatusBar(header); // 处理ios兼容

	var newsId = api.pageParam.newsId; // 获取参数

    var pos = $api.offset(header); // 获取位置数据

    api.openFrame({ // 打开Frame

        name: 'news-textCon',

        url: 'news-textCon.html',

        pageParam: {newsId: newsId}, // 传递参数

        rect:{

            x: 0,

            y: pos.h, // 头部留位置

            w: 'auto',

            h: 'auto'

        },

        bounces: true,

        vScrollBarEnabled: false

    });

};

打开frame，保证头部留有位置，同时可以传递参数

再看看news-textCon.js中的内容

apiready = function () {

    var newsId = api.pageParam.newsId; // 获取参数

    var getNewsByIdUrl = '/news/?filter=';

    var urlParam = {where: {id: newsId}};

    api.showProgress({

        title: '加载中...',

        modal: false

    });

    ajaxRequest(getNewsByIdUrl+JSON.stringify(urlParam),'get','',function(ret,err){

        if (ret) {

            api.toast({

                ...

            })

        } else {

            api.toast({

                ...

            })

        }

        api.hideProgress();

    });

};

获取传入的参数，

获取数据与相应的页面处理

我的案例

商品详情拆分

1.goods_detail.html
<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>

    <title>api</title>

    <link rel="stylesheet" type="text/css" href="../css/api.css" />

    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />

</head>

<body>

<div id="wrap">

    <div id="main">

        <header class="aui-bar aui-bar-nav fix-status-bar" id="aui-header">

            <a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin();">

                <span class="aui-iconfont aui-icon-left"></span>

            </a>

            <div class="aui-title"><!-- 商品名称 --></div>

        </header>

    </div>

</div>

</body>

<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript" src="../script/goods_detail.js"></script>

</html>
2.goods_detailCon.html

移除头部的

<header class="aui-bar aui-bar-nav fix-status-bar" id="aui-header">

            <a class="aui-btn aui-pull-left" tapmode onclick="api.closeWin();">

                <span class="aui-iconfont aui-icon-left"></span>

            </a>

            <div class="aui-title"><!-- 商品名称 --></div>

</header>
3.goods_detail.js
apiready = function(){

    var header = $api.byId('main'); // 获取头部

    $api.fixStatusBar(header); // 处理ios

    var pos = $api.offset(header); // 获取头部位置

    var title  = $api.dom(header,'.aui-title'); // 获取标题位置

    $api.html(title,api.pageParam.title); // 设置标题内容

    api.openFrame({ // 打开内容页，并传递参数

        name: 'goods_detailCon',

        url: 'goods_detailCon.html',

        rect:{

            x: 0,

            y: pos.h,

            w: 'auto',

            h: 'auto'

        },

        bounces: true,

        opaque: true,

        vScrollBarEnabled: false,

        pageParam:{

            goods_id:api.pageParam.goods_id

        }

    });

};
4.goods_detailCon.js
apiready = function(){

    fix_status_bar();// 修复头部

    var goods_id = api.pageParam.goods_id;

    // 获取商品相关信息

    api.ajax({

        url: 'http://zhudianbao.yunlutong.com/?g=Api&m=Goods&a=getGoodsInfo',

        method: 'get',

        data: {

            values: {

                goods_id: goods_id

            }

        }

    }, function(json, err) {

        if (json.status == '1') {

            var interText = doT.template($("#goodstmpl").text());

            $("#info_area").html(interText(json.info));

            var swiper = new Swiper('.swiper-container', {

                pagination: '.swiper-pagination',

                paginationClickable: true,

                spaceBetween: 30,

                centeredSlides: true,

                autoplay: 3500,

                autoplayDisableOnInteraction: false

            });

        } else {

            var toast = new auiToast();

            toast.fail({

                title:json.msg,

                duration:2000

            });

        }

    });

}

获取参数，根据参数获取数据，并使用doT进行页面布局。

看效果

apiCloud中实现头部与内容分离与操作规范，App头部header固定，头部与内容分离的更多相关文章

  1. 移动端固定头部和固定左边第一列的实现方案（Vue中实现demo）

    最近移动端做一份报表,需要左右滚动时,固定左边部分:上下滚动时,固定头部部分. 代码在Vue中简单实现 主要思路是: a.左边部分滚动,实时修改右边部分的滚动条高度 b.头部和内容部分都设置固定高度, ...

  2. apiCloud中aui获取不到高度，pos.h为0，offsetHeight为0问题

    apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题 原HTML <div class="row aui-text-center"> ...

  3. apiCloud中openFrameGroup传参

    apiCloud中openFrameGroup传参 1.无效的 api.openFrameGroup({ // 打开 frame 组 name: 'group', scrollEnabled: fal ...

  4. 在指定的div中搜索内容，并滚动显示到当前搜索到的内容处

    我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...

  5. apiCloud中api.ajax方法跨域传参获取数据

    apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...

  6. 嵌入式表单字段中的内容可能被server更改以删除不安全的内容。是否要又一次载入您的页面以查看保存结果？

    嵌入式表单字段中的内容可能被server更改以删除不安全的内容.是否要又一次载入您的页面以查看保存结果?         近期有朋友问到,当他在SharePoint首页上进行编辑时.插入一段代码. 完 ...

  7. 输出内容 document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容

    输出内容(document.write) document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容. 第一种:输出内容用""括起,直 ...

  8. Midnight.js – 实现奇妙的固定头部切换效果

    Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...

  9. 【转载】app测试的过程和重点关注内容

    针对 app测试的过程和重点关注内容,做以下梳理和总结:   1 . 首先是测试资源确认及准备 ( 1 ) 产品需求文档.产品原型图.接口说明文档以及设计说明文档等应齐全: ( 2 ) 测试设备及工具 ...

随机推荐

  1. 【opencv】opencv在vs下的配置（持续更新）

    经常使用配置记录,会更新下去. 1.去掉ipch及.sdf文件 opencv在vs编译会得到很多文件.当中.dsf和ipch文件就有几十M.总是非常占空间,而这都是用来保存C++预编译的头文件和Int ...

  2. Beginning Python From Novice to Professional (9) － Socket

    Socket 小型server: #!/usr/bin/env python import socket s = socket.socket() host = socket.gethostname() ...

  3. Linux就该这么学 20181008(第十三章BIND)

    参考链接https://www.linuxprobe.com Bind提供域名解析服务 DNS Domin Name Server 域名解析服务 功能模式 .正向解析,将域名解析为IP地址 .反向解析 ...

  4. 编译安装FFmpeg 要支持xvid、x264、mp3、ogg、amr、faac

    编译安装FFmpeg 要支持xvid.x264.mp3.ogg.amr.faac libfaac    faac格式的编解码包libmp3lame    mp3格式编解码包libopencore-am ...

  5. 高并发之web服务器负载均衡简单介绍

    负载均衡种类 F5,七层负载均衡,四层负载均衡 Nginx负载均衡 内置策略.扩展策略 内置策略:IPHash.加权轮询 扩展策略:fair策略.通用hash.一致性hash 加权轮询策略 首先将请求 ...

  6. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  7. Codeforces 993C. Careful Maneuvering（详细注解）

    解题思路 -100和+100是没有用的,只要知道左边的飞船轴和右边的飞船轴离y轴一样近即可.为简单起见,我们将左边的轴设为-1,右边的设为1. 某个点能摧毁的飞船一定是因为有两个飞船关于这个点对称.即 ...

  8. Kattis - ACM Contest Scoring

    ACM Contest Scoring Our new contest submission system keeps a chronological log of all submissions m ...

  9. day16 闭包以及装饰器(好东西)

    目录 闭包 装饰器 最基础的装饰器 完善装饰器 有返回值的 有参数的 装饰器模版 语法糖 登录装饰器 可变类型的局部变量可以修改全局变量 三层装饰器 闭包 首先要理解函数对象的概念,其实函数名就相当于 ...

  10. 快速掌握ajax！

    ajax是什么? ajax——asynchronous JavaScript and xml:异步的js和xml 它能使用js访问服务器,而且是异步访问 服务器给客户端的响应一般是整个页面,一个htm ...