apiCloud中实现头部与内容分离与操作规范,App头部header固定,头部与内容分离

简介:

官方案例

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进行页面布局。

看效果



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5952935.html,如需转载请自行联系原作者

相关文章
|
5月前
|
前端开发
后端返回图片二进制流,前端转base64
本文介绍了如何将后端返回的图片二进制流转换为Base64格式,以便在前端使用。通过在axios请求中设置`responseType`为`arraybuffer`,然后使用`btoa`和`Uint8Array`进行转换。
421 5
|
6月前
|
运维 Serverless 调度
函数计算产品使用问题之怎么在HTTP触发的函数里添加或读取自定义头部
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
7月前
创建带有公共头部的Electron窗口
创建带有公共头部的Electron窗口
44 0
|
7月前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
307 0
|
9月前
Nuxt3 实战 (五):Header 头部布局
这篇文章介绍了作者忙于公司系统迭代需求,但抽空完成了布局的Header部分。文章提到了需求的拆分,布局的组件拆分,并介绍了Nuxt框架以及安装和启用插件的步骤。还提到了白天暗黑模式切换组件和SVG跟随模式的组件的创建。最后,文章提到了PC端和移动端的最终实现效果,并给出了Github仓库和在线预览链接。
151 0
Nuxt3 实战 (五):Header 头部布局
后端返回的base64流形式的图片,怎么放在src中
后端返回的base64流形式的图片,怎么放在src中
193 0
|
缓存 算法
HTTP协议中的ETag头字段如何实现快速判断资源是否变化?
HTTP协议中的ETag头字段如何实现快速判断资源是否变化?
213 0
|
PHP
php常用的header头部定义
php常用的header头部定义
106 0
HTML——input标记的典型应用(制作简单信息表单)
HTML——input标记的典型应用(制作简单信息表单)
179 0
HTML——input标记的典型应用(制作简单信息表单)
mode:类型非常多 r:只读 从头部开始读 io.UnsupportedOperation: not writable w:写入 每次都是从头部开始写 原有的内容
mode:类型非常多 r:只读 从头部开始读 io.UnsupportedOperation: not writable w:写入 每次都是从头部开始写 原有的内容

热门文章

最新文章