【App开发笔记】2.9 编写搜索好友页面
2017-08-25 本文已影响0人
7abbcd54a89d
2.9.1 添加UIinput模块，并重新自定义loader，下载安装
添加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;">
</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>
最终效果
