apiCloud中实现头部与内容分离与操作规范，App头部header固定，头部与内容分离-阿里云开发者社区

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

2017-06-01 1131

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

官方案例

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，如需转载请自行联系原作者