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

作者: 7abbcd54a89d | 来源:发表于2017-08-29 13:36 被阅读0次

【App开发笔记】2.10 编写用户详情页面
最近完成的一个项目感想
20 项目实战：详情页面和登录功能开发（一）
Django搭建个人博客：编写文章详情页面
【App开发笔记】2.4 编写登录页面(1)
【App开发笔记】2.5 编写登录页面（2）
【App开发笔记】2.9 编写搜索好友页面
APP内打开某个应用的App Store下载页面
iOS App内打开某个应用的App Store下载页面
基于vue2.x实现的即时通讯程序仿微信聊天5对接logo、ge

源码地址

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>

效果图

【App开发笔记】2.10 编写用户详情页面
源码地址 2.10.1 添加UIPullRefresh模块修改config.xml文件在js/common.j...
最近完成的一个项目感想
页面分类。 pc端页面 app端h5页面 m站页面 PC用户：使用pc端页面，跟平时开发无异 pad app用户：...
20 项目实战：详情页面和登录功能开发（一）
详情页面布局 1.编写布局结构 2.编写布局样式使用redux管理详情页面数据我们把数据放进detail的st...
Django搭建个人博客：编写文章详情页面
有了文章列表页面后，当然还需要详情页面，方便用户对某一篇感兴趣的文章深入阅读。编写视图函数打开article/...
【App开发笔记】2.4 编写登录页面(1)
源码地址样板页面 2.4.1 首先写登录的头部页面 html/user/login_head.html 2...
【App开发笔记】2.5 编写登录页面（2）
源码地址 2.5.1 先省略微信授权登录模块(放到后台时候做)，直接做微信授权登录之后的页面 js/common....
【App开发笔记】2.9 编写搜索好友页面
源码地址 2.9.1 添加UIinput模块，并重新自定义loader，下载安装 UIInput文档 2....
APP内打开某个应用的App Store下载页面
在很多 APP 中我们都见到过某些应用的推广广告，点击之后会模态到 App Store 应用详情页面，引导用户下载...
iOS App内打开某个应用的App Store下载页面
在很多 APP 中我们都见到过某些应用的推广广告，点击之后会模态到 App Store 应用详情页面，引导用户下载...
基于vue2.x实现的即时通讯程序仿微信聊天5对接logo、ge
前言：我们已经开发好了登录注册页面和通讯录页面以及聊天详情页面下面准备接入登录注册和获取用户信息接口先打开接口...