【App开发笔记】2.9 编写搜索好友页面

源码地址

2.9.1 添加UIinput模块,并重新自定义loader,下载安装

UIInput文档

添加UIInput模块

2.9.2 在common.js里封装几个方法

//DOT模版引擎的方法
function TplInnerHtmlLoad(tpl_id, show_id, data) {
    var tplhtml = doT.template($api.byId(tpl_id).innerHTML);
    $api.byId(show_id).innerHTML = tplhtml(data);
    api.parseTapmode();
}

function TplAppendLoad(tpl_id, show_id, data) {
    var tplhtml = doT.template($api.byId(tpl_id).innerHTML);
    $api.append($api.byId(show_id), tplhtml(data))
    api.parseTapmode();
}
//一个简易的loading方法
//知识点api.wgtRootDir是项目widget的实际路径
function OpenLoading(append_id) {
    var html="";
    html+="<div id='loading' style='background: #ffffff;text-align: center;padding: 4px 0;'>";
    html+="<img src='";
    html+=api.wgtRootDir;
    html+="/image/defult/loading.gif' style='height: 30px'>";
    html+="</div>";
    $api.append($api.byId(append_id),html)
}
function CloseLoading() {
    $api.remove($api.byId('loading'));
}

2.9.3 编写搜索好友win页面

<!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"/>
</head>
<body class="H-flexbox-vertical">
<header class="H-header H-padding-vertical-top-25" id="header" style="background-color: #fafafa">
     <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 H-font-size-20 H-vertical-middle"></i>
    </span>
    <div class="H-header-title H-center-all H-font-size-14 H-text-show-row-1 H-position-absolute H-width-100-percent"
         style="color: #4a4a4a">搜索好友
    </div>
</header>

<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">
    apiready = function() {
       api.openFrame({
           name: 'search_friends_body',
           url: './search_friends_body.html',
           rect: {
               x: 0,
               y: $api.byId('header').offsetHeight,
               w: api.winWidth,
               h: api.frameHeight - $api.byId('header').offsetHeight
           }
       });
    };
</script>
</body>
</html>

2.9.4 编写搜索好友frame页面

<!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"/>
    <style type="text/css">
        .search_btn {
            width: 80px;
            text-align: center;
            color: #a2a2a2;
            line-height: 2.6rem
        }

        .search_btn:active {
            color: #e6e6e6;
        }
        .friend_box:active{
            filter:opacity(.3);
            -webkit-filter:opacity(.3);
        }
    </style>
</head>
<div class="H-padding-8" style="background: #fafafa">
    <div class="H-flexbox-horizontal H-box-sizing-border-box">
        <div id="search_box"
             class="H-padding-horizontal-both-10 H-width-100-percent H-border-radius-5 H-vertical-middle"
             style="height: 30px;background: #ffffff">
            <span class="H-width-100-percent H-text-align-left H-display-block H-font-size-14" style="color: #d8d8d8;">
            <i class="iconfont icon-search"></i>
            </span>
        </div>
        <div tapmode="" onclick="CloseWin()" class="H-font-size-12 search_btn">取消</div>
    </div>
</div>
<div id="friend_list"></div>
<script id="friend_tpl" type="text/x-dot-template">
    <div tapmode="" onclick="" class="friend_box H-flexbox-horizontal H-box-sizing-border-box H-theme-background-color-white H-border-vertical-bottom-after H-clear-both H-padding-horizontal-both-10 H-padding-vertical-both-8">
        <div style="width:40px;height:40px;">
            ![](../../image/defult/head-img.png)
        </div>
        <div class="H-flex-item H-padding-horizontal-both-10 H-vertical-middle H-overflow-hidden">
            <div class="H-width-100-percent">
                <strong class="H-font-weight-normal H-display-block H-font-weight-500 H-font-size-14 H-text-show-row-1">姓名姓名</strong>
            </div>
        </div>
        <div class="white-space-nowrap H-text-align-right">
        <span class="H-display-inline-block H-margin-vertical-top-8">
        <label class="H-display-inline-block H-vertical-middle H-font-size-12" style="color: #9b9b9b;">成都</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 () {
        var UIInput = api.require('UIInput');
        UIInput.open({
            rect: {
                x: 34,
                y: 10,
                w: $api.byId('search_box').offsetWidth - 38,
                h: 26
            },
            styles: {
                bgColor: 'rgba(0,0,0,0)',
                size: 13,
                color: '#4a4a4a',
                placeholder: {
                    color: '#d8d8d8'
                }
            },
            autoFocus: true,
            placeholder: '搜索昵称/手机号',
            keyboardType: 'search',
            fixedOn: api.frameName
        }, function (ret, err) {
            if(ret.eventType=="search"){
                UIInput.closeKeyboard({
                    id:ret.id
                });
                //ajax success
                OpenLoading('friend_list');
               setTimeout('CloseLoading();TplAppendLoad(\'friend_tpl\'\,\'friend_list\'\,\'\')',3000)

            }
        });

    }
</script>
</body>
</html>
最终效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,011评论 25 707
  • 1。那时候,是风 九月是盛夏的尾巴,金秋的开头。 如果可以,徐予橙希望从来就没遇见过顾弥歌。 当人来人往的护城河桥...
    鸢茉阅读 370评论 0 2
  • 坐在高台靠着冰冷的墙壁,面无表情。从手中的奶茶汲取唯一一点热量,看着渐行渐远的你,依旧微笑,我的孤独无人知晓! 在...
    半亩荒阅读 228评论 0 0
  • 一 挂了电话,我仿佛听得见那边车站熏风拂面,姐姐和姐夫相依等待着出发——这几天江浙沪一片直是一座火炉,从早到晚叫人...
    理性好累阅读 209评论 0 1