【App开发笔记】2.10 编写用户详情页面

源码地址

2.10.1 添加UIPullRefresh模块

添加UIPullRefresh模块

修改config.xml文件

<preference name="customRefreshHeader" value="UIPullRefresh"/>

在js/common.js中封装UIPullRefresh的方法

function SetTopLoading(callback) {
    api.setCustomRefreshHeaderInfo({
        bgColor: '#ffffff',
    }, function() {
        (callback && typeof(callback) === "function") && callback();
    })
}

function OpenTopLoading() {
    api.refreshHeaderLoading();
}

function CloseTopLoading() {
    api.refreshHeaderLoadDone()

}

2.10.2 在iconfont中添加相应图标

2.10.3 修改css/style.css文件并修改之前的样式

.icon_active_1{
    color: #929292
}
.icon_active_1:active{
    color: #e8e8e8;
}
.icon_active_2{
    color: #ffffff;
}
.icon_active_2:active{
    color: rgba(255,255,255,0.8);
}
.icon_active_3{
    color: #b9b9b9;
}
.icon_active_3:active{
    color: #ebebeb;
}

2.10.4 修改add_friends_body.html中的方法

 <div tapmode="" onclick="OpenWin('user_win','./user_win.html')" class="H-line-height-0" style="min-width: 100%">
            <div class="picture H-position-relative  H-margin-horizontal-auto" style="width: 64px; height: 64px;">
                <span tapmode="" onclick="SelectFriend(this)" selected="1"
                      class="friend_select friend_select_bg H-icon H-display-block H-position-absolute H-center-all H-border-radius-circle H-z-index-1000 H-line-height-0"
                      style="">
                    <i class="iconfont icon-select H-font-size-12 H-vertical-align-middle"></i>
                </span>
                <img src="../../image/defult/head-img.png" class="H-display-block H-border-radius-circle" alt=""
                     title="" style="width: 64px; height: 64px;">
            </div>
            <div class="H-font-size-14 H-padding-vertical-both-2" style="line-height: 1.4rem">名字名字</div>
            <div class="H-font-size-10 H-theme-font-color-ccc H-padding-vertical-both-2" style="line-height: 1rem">粉丝  654</div>
        </div>





 function SelectFriend(obj) {
        event.stopPropagation()
        if($api.attr(obj,'selected')=="1"){
            $api.removeCls(obj,'friend_select_bg')
            $api.addCls(obj,'friend_noselect_bg')
            $api.attr(obj,'selected','0')
        }else{
            $api.addCls(obj,'friend_select_bg')
            $api.removeCls(obj,'friend_noselect_bg')
            $api.attr(obj,'selected','1')
        }
    }

2.10.5 编写user_frame页面

html/user/user_frame.html

<!DOCTYPE html>
<html class="H-theme-background-color-transparent">
<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"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>app开发笔记</title>
    <link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<body class="H-theme-background-color-transparent">
<header class="H-header H-padding-vertical-top-25" id="header" style="background-color:rgba(0,0,0,0.1)">
    <span onclick="CloseWin()" tapmode="" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-padding-horizontal-left-5 H-z-index-100">
        <i class="iconfont icon-arrow-left icon_active_2 H-font-size-20 H-vertical-middle"></i>
    </span>
    <span class="H-icon H-position-relative H-display-inline-block H-float-right H-vertical-middle H-theme-font-color-white H-padding-horizontal-right-10 H-z-index-100">
        <i class="iconfont icon-share icon_active_2 H-font-size-20 H-vertical-middle"></i>
    </span>
</header>
<script src="../../script/common.js" type="text/javascript"></script>
</body>
</html>

2.10.6 编写user_win页面

html/user/user_win.html

<!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"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>app开发笔记</title>
    <link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style type="text/css">
        .user_bg {
            overflow: hidden;
            height: 240px;
            background-image: url(../../image/TEST.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #cccccc
        }

        .user_head_img {
            width: 100%;
            text-align: center;
            position: absolute;
        }

        .user_head_img img {
            position: relative;
            top: -40px;
            height: 80px;
            width: 80px;
            border-radius: 50%;
            border: 2px solid #ffffff;
        }

        .follow_btn {
            -webkit-touch-callout: none;
            -webkit-appearance: none;
            -webkit-user-select: none;
            padding: 4px 20px;
            border-radius: 32px;
        }

        .unfollow_btn {
            color: #e7511a;
            border: 1px solid #e7511a;
        }

        .unfollow_btn:active {
            color: #faddd2;
            border-color: #faddd2;
        }

        .followed_btn {
            color: #9b9b9b;
            border: 1px solid #9b9b9b;
        }

        .followed_btn:active {
            color: #ebebeb;
            border-color: #ebebeb;
        }

        .article_img {
            overflow: hidden;
            height: 200px;
            background-image: url(../../image/TEST.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-color: #cccccc
        }
        .article_watch{
            position: absolute;right:10px;margin-top: -20px;color: #d8d8d8
        }
    </style>
</head>
<body>
<div class="user_bg"></div>
<div class="user_head_img">
    ![](../../image/defult/head-img.png)
</div>
<div class="H-font-size-14 H-theme-font-color-333 H-text-align-center" style="padding-top: 60px">姓名姓名</div>
<div class="H-padding-vertical-both-15 H-font-size-12 H-theme-font-color-999 H-text-align-center">
    <span>粉丝<label class="H-padding-horizontal-left-5">177</label></span>
    <span>|</span>
    <span class="">创作<label class="H-padding-horizontal-left-5">57</label></span>
</div>
<div class="H-text-align-center H-padding-vertical-top-15">
    <button tapmode="" onclick="Follow(this)" followed="0"
            class="follow_btn unfollow_btn H-font-size-12 H-outline-none H-theme-background-color-transparent">+ 关注
    </button>
</div>
<div id="article_list" class="H-margin-vertical-both-20" style="background: #f8f8f8"></div>
<script id="article_tpl" type="text/x-dot-template">
    {{for (var i=0;i<5;i++){}}
    <div class="H-margin-vertical-bottom-15">
        <div class="article_img"></div>
        <div class="H-font-size-12 article_watch">
            <i class="iconfont icon-eye1"></i>
            <label>111</label>
        </div>
        <div class="H-padding-vertical-both-10 H-theme-background-color-white H-text-align-center">标题标题</div>
        <div class="H-padding-vertical-both-10 H-theme-background-color-white H-text-align-left">
            <span class="H-padding-horizontal-both-10  icon_active_3">
                <i class="iconfont icon-heart H-font-size-16"></i>
                <label class="H-font-size-14 H-padding-horizontal-both-3 H-font-size-12">14</label>
            </span>
            <span class="H-padding-horizontal-both-10  icon_active_3">
                <i class="iconfont icon-comment H-font-size-14"></i>
                <label class="H-font-size-14 H-padding-horizontal-both-3 H-font-size-12">54</label>
            </span>
            <span class="H-padding-horizontal-both-10  icon_active_3">
                <i class="iconfont icon-share H-font-size-14"></i>
                <label class="H-font-size-14 H-padding-horizontal-both-3 H-font-size-12">104</label>
            </span>
        </div>
    </div>
    {{}}}
</script>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/doT.min.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">

    apiready = function () {
        api.openFrame({
            name: 'user_frame.html',
            url: './user_frame.html',
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: 69
            }
        });
        SetTopLoading()
        setTimeout('CloseTopLoading();TplInnerHtmlLoad(\'article_tpl\'\,\'article_list\'\,\'\')',3000)
    };

    function Follow(obj) {
        var followed = Number($api.attr(obj, 'followed'));
        if (followed) {
            $api.addCls(obj, 'unfollow_btn');
            $api.removeCls(obj, 'followed_btn');
            $api.html(obj, '+ 关注');
            $api.attr(obj, 'followed', 0)
        } else {
            $api.removeCls(obj, 'unfollow_btn');
            $api.addCls(obj, 'followed_btn');
            $api.html(obj, '已关注');
            $api.attr(obj, 'followed', 1)
        }
    }
</script>
</body>
</html>
效果图
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,924评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,781评论 2赞 378
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,813评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,264评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,273评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,383评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,800评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,482评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,673评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,497评论 2赞 318
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,545评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,240评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,802评论 3赞 304
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,866评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,101评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,673评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,245评论 2赞 341

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1赞 92
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,332评论 25赞 707
  • 这年那月今日（1）
    刚搬不久呢！ 瞎玩还是玩虾呀？ 去趟老家回深圳啰！ 家里买了一个投影仪！ 装回老大看看，酷不酷？
    freewalker阅读 286评论 0赞 0
  • 致我的女儿
    ——有一个女儿是什么体验？ ——我愿把世界上所有美好的都给你。
    顾大姐阅读 201评论 0赞 0
  • 晨起之光-反思
    时光没有长度 但是可以有厚度 不主动活的有厚度 就只有反思自己的理念 是否有无毒 虚度光阴没有错 错在不反思为何虚度
    10086好阅读 247评论 0赞 0