【App開發(fā)筆記】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開發(fā)筆記</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開發(fā)筆記</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>
最終效果
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,905評論 25贊 709
  • 1。那時候，是風(fēng) 九月是盛夏的尾巴，金秋的開頭。 如果可以，徐予橙希望從來就沒遇見過顧彌歌。 當(dāng)人來人往的護城河橋...
    鳶茉閱讀 459評論 0贊 2
  • 坐在高臺靠著冰冷的墻壁，面無表情。從手中的奶茶汲取唯一一點熱量，看著漸行漸遠(yuǎn)的你，依舊微笑，我的孤獨無人知曉！ 在...
    半畝荒閱讀 251評論 0贊 0
  • 一 掛了電話，我仿佛聽得見那邊車站熏風(fēng)拂面，姐姐和姐夫相依等待著出發(fā)——這幾天江浙滬一片直是一座火爐，從早到晚叫人...
    理性好累閱讀 272評論 0贊 1

友情鏈接更多精彩內(nèi)容