项目中用到,记录一下,未添加搜索功能,使用技术 ionic3 + angular5
1.创建contact文件夹
ionic g page contact
2.contact.html
<ion-header class="bank" no-border>
<!--<form (ngSubmit)="onStoreKeyword('product')" class="search-form">-->
<!--<search-bar #searchbar name="search"-->
<!--[placeholder]=""-->
<!--[cancelButtonText]="'GLOBAL.CANCEL'|translate"-->
<!--[(ngModel)]="searchInput"-->
<!--(ionCancel)="onCancel()"-->
<!--(ionClear)="onClear($event)"-->
<!--(ionInput)="goSearchResult($event)">-->
<!--</search-bar>-->
<!--</form>-->
<ion-navbar>
<ion-title>所有联系人</ion-title>
</ion-navbar>
<!--<ion-toolbar>-->
<!--<ion-searchbar-->
<!--[placeholder]="'姓名'"-->
<!--[cancelButtonText]="'取消'"-->
<!--[(ngModel)]="searchInput"-->
<!--(ionCancel)="onCancel()"-->
<!--(ionClear)="onClear($event)"-->
<!--(ionInput)="goSearchResult($event)"></ion-searchbar>-->
<!--</ion-toolbar>-->
</ion-header>
<!--左边导航-->
<ion-content class="bank-from">
<div class="letter" *ngIf="!isSearching">
<div class="letter-right">
<span *ngFor="let letter of letters" (click)="scrollToTop(letter)">{{letter}}</span>
</div>
</div>
<!--搜索的结果 -->
<ion-list *ngIf="isSearching">
<ion-item-group *ngFor="let contacts of searchingItems;let i = index">
<ion-item-divider color="light" id="{{searchLetters[i]}}">{{searchLetters[i]}}</ion-item-divider>
<ion-item *ngFor="let contact of contacts" (click)="goBack(contact)">
<!--<ion-avatar item-start>-->
<!--</ion-avatar>-->
<h2 [innerHTML]="contact.userName | keyword:searchInput"></h2>
</ion-item>
</ion-item-group>
</ion-list>
<!--未搜索的结果 -->
<ion-list *ngIf="!isSearching">
<ion-item-group *ngFor="let contacts of formatContacts;let i = index">
<ion-item-divider color="light" id="{{letters[i]}}">{{letters[i]}}</ion-item-divider>
<ion-item *ngFor="let contact of contacts" (click)="goBack(contact)">
<!--<ion-avatar item-start>-->
<!--</ion-avatar>-->
<h2 [innerHTML]="contact.userName | keyword:searchInput"></h2>
</ion-item>
</ion-item-group>
</ion-list>
</ion-content>
3.contact.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ContactPage } from './contact';
import {PipesModule} from "../../pipes/pipes.module";
@NgModule({
declarations: [
ContactPage,
],
imports: [
IonicPageModule.forChild(ContactPage),
PipesModule
]
})
export class ContactPageModule {}
4.contact.scss 页面样式
page-contact {
.hj-toast {
text-align: center;
.toast-wrapper {
width: 60px !important;
min-width:60px;
}
}
.bank .searchbar-input-container {
width: 100%;
.searchbar-input{
width: 100%;
.text-input{
width: 100%;
}
}
}
.bank-from {
ion-avatar,
.label-ios {
margin: 6px 6px !important;
}
.letter {
display: flex;
width: 30px;
position: fixed;
right: 0;
top: 110px;
z-index: 10010;
justify-content: center;
align-items: center;
.letter-right {
font-size: 16px;
display: flex;
//flex-direction: column;
//flex-flow:1;
flex-flow:column nowrap;
background: #ebebeb;
color: #328fc3;
border-top-left-radius: 6px;
align-items: center;
span {
display: block;
padding: 2px 3px;
}
}
}
.letter:after{
display: block;
content: '';
clear: both;
}
ion-avatar section {
display: flex;
justify-content: center;
align-items: center;
width: pxTorem(70);
height: pxTorem(70);
border-radius: pxTorem(35);
background: #0a9dc7;
color: #FFF;
}
ion-item-divider {
background-color: #eef4f5 !important;
ion-label {
margin: 0 !important;
color: #444444;
}
}
}
}
5.contact.ts 相关方法
import {Component, ViewChild, ElementRef} from '@angular/core';
import {Content, IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
/**
* Generated class for the ContactPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-contact',
templateUrl: 'contact.html',
})
export class ContactPage {
@ViewChild(Content) content: Content;
/*搜索的关键字*/
searchInput: string = '';
/*请求通讯录的值*/
contactsUrl = 'assets/contacts.json';
/*字母的初始化*/
aLetters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
letters = [];
formatContacts: any = []; //按首字母顺序格式化后的数组
searchingItems = []; //搜索显示的数组
searchLetters = [];
isSearching = false;
callback:any;
toast:any;
remitBanks:any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
// private transactService:TransactService,
public toastCtrl: ToastController,
public elementRef: ElementRef) {
//获取通讯录数据
// this.transactService.remitBanks().subscribe((res:any) => {
// this.remitBanks = res;
// this.aLetters.forEach((res, index) => {
// if(this.remitBanks[res] && this.remitBanks[res].lenght != 0) {
// this.formatContacts.push(this.remitBanks[res]);
// this.letters.push(res);
// }
// })
// });
this.fetch((data) => {
this.remitBanks = data;
this.aLetters.forEach((res, index) => {
if(this.remitBanks[res] && this.remitBanks[res].lenght != 0) {
this.formatContacts.push(this.remitBanks[res]);
this.letters.push(res);
}
});
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad ContactPage');
}
fetch(data) {
const req = new XMLHttpRequest();
req.open('GET', this.contactsUrl);
req.onload = () => {
data(JSON.parse(req.response));
};
req.send();
}
/**
*取消结果触发的值
*/
onCancelSearch(event) {
this.isSearching = false;
this.searchingItems = [];
}
/**
*定位查找首字母对应的通讯录
*/
scrollToTop(letter) {
// this.show(letter,1000);
if(this.elementRef.nativeElement.querySelector("ion-item-divider#" + letter)){
let scrollTop = this.elementRef.nativeElement.querySelector("ion-item-divider#" + letter).offsetTop;
this.content.scrollTo(0, scrollTop, 300);
}
}
/**
*通过关键字查询搜索的结果值
*/
goSearchResult(ev: any) {
this.isSearching = true;
let val = ev.target.value;
this.searchInput = val;
if(val && val.trim() != '') {
this.searchLetters =[];
this.searchingItems =[];
this.letters.forEach((res,index) => {
let search = this.formatContacts[index].filter((item) => {
return (item.userName.indexOf(val) > -1);
})
if(search != null && search.length > 0) {
this.searchLetters.push(res);
this.searchingItems.push(search);
}
})
} else {
this.isSearching = false;
}
}
goBack(data){
this.callback(data).then(()=>{
this.navCtrl.pop();
});
}
ionViewWillEnter() {
this.callback = this.navParams.get("callback")
}
onCancel() {
this.navCtrl.pop();
}
onClear($event){
this.searchInput = '';
}
// show = (message: string = '操作完成', duration: number = 2500) => {
// this.toast = this.toastCtrl.create({
// message: message,
// duration: duration,
// position: 'middle',
// cssClass:'hj-toast'
// });
// this.toast.present();
// };
}
6.common.scss 添加公共样式
@function pxTorem($px) {
@return $px/46.875 * 1rem;
}
7.创建pipes文件夹,里面创建keyword文件夹
import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";
/**
* Generated class for the KeywordPipe pipe.
*
* See https://angular.io/api/core/Pipe for more info on Angular Pipes.
*/
@Pipe({
name: 'keyword',
})
export class KeywordPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
/**
* Takes a value and makes it lowercase.
*/
transform(val: string, keyword: string): any {
let Reg = new RegExp(keyword, 'i');
if(val) {
let res = val.replace(Reg, `<span style="color:#338ec3;">${keyword?keyword:''}</span>`);
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
}
8.创建pipes.module.ts
import { NgModule } from '@angular/core';
import { KeywordPipe } from './keyword/keyword';
@NgModule({
declarations: [KeywordPipe],
imports: [],
exports: [KeywordPipe]
})
export class PipesModule {}
9.模拟数据 contacts.json 放到assess文件夹下
{
"9": [
{
"userCode": "nine",
"userId": 1184,
"userName": "9订单审批"
},
{
"userCode": "9000",
"userId": 1176,
"userName": "9000"
}
],
"D": [
{
"userCode": "dengz",
"userId": 1046,
"userName": "邓孜"
},
{
"userCode": "zhuyanxian",
"userId": 1297,
"userName": "大猪"
},
{
"userCode": "dengzi",
"userId": 1094,
"userName": "邓孜"
},
{
"userCode": "demo1",
"userId": 1185,
"userName": "东软小伙伴"
},
{
"userCode": "duanhx",
"userId": 1527,
"userName": "段海霞"
}
],
"F": [
{
"userCode": "fangying",
"userId": 1320,
"userName": "方莹"
},
{
"userCode": "fangy",
"userId": 1467,
"userName": "方莹"
},
{
"userCode": "fangxh",
"userId": 923,
"userName": "方晓晗"
},
{
"userCode": "fan",
"userId": 1599,
"userName": "fan"
},
{
"userCode": "fncg1",
"userId": 1415,
"userName": "方楠"
}
],
"G": [
{
"userCode": "gongzhiyun",
"userId": 1193,
"userName": "龚智赟"
},
{
"userCode": "zhjf1",
"userId": 1061,
"userName": "供应商变更"
},
{
"userCode": "guoql",
"userId": 1423,
"userName": "郭其炼"
}
],
"A": [
{
"userCode": "pap",
"userId": 1604,
"userName": "app-潘凡"
},
{
"userCode": "CGY",
"userId": 1068,
"userName": "阿西巴"
},
{
"userCode": "aaa",
"userId": 1600,
"userName": "aaa"
},
{
"userCode": "ala",
"userId": 1465,
"userName": "阿拉丁"
},
{
"userCode": "fxc123",
"userId": 1446,
"userName": "asd"
}
],
"B": [
{
"userCode": "biaozhi",
"userId": 1298,
"userName": "标志陈老板"
},
{
"userCode": "test",
"userId": 6,
"userName": "白斌"
},
{
"userCode": "baobiao",
"userId": 1445,
"userName": "报表"
}
],
"C": [
{
"userCode": "caiwqcgy",
"userId": 979,
"userName": "蔡文强"
},
{
"userCode": "cxt",
"userId": 1174,
"userName": "cxt"
},
{
"userCode": "0591",
"userId": 1402,
"userName": "采购1"
},
{
"userCode": "chensw",
"userId": 958,
"userName": "陈思伟"
},
{
"userCode": "WTF",
"userId": 1357,
"userName": "ChenPJ"
},
{
"userCode": "purHBY",
"userId": 1522,
"userName": "采购订单审批HBY"
},
{
"userCode": "caigq",
"userId": 1042,
"userName": "蔡光巧"
},
{
"userCode": "0592",
"userId": 1365,
"userName": "测试0"
},
{
"userCode": "cmk_user",
"userId": 1283,
"userName": "cmk考试用户"
},
{
"userCode": "cyt",
"userId": 1171,
"userName": "陈烨婷2号"
},
{
"userCode": "cheny",
"userId": 1634,
"userName": "陈扬"
},
{
"userCode": "chenlf",
"userId": 1062,
"userName": "陈丽芬"
},
{
"userCode": "0593",
"userId": 1403,
"userName": "采购2"
},
{
"userCode": "chenjl",
"userId": 986,
"userName": "陈剑龙"
},
{
"userCode": "app",
"userId": 1369,
"userName": "测试员小陈"
},
{
"userCode": "chenjg",
"userId": 1526,
"userName": "陈靖国"
},
{
"userCode": "chenmk",
"userId": 1072,
"userName": "陈明坤"
},
{
"userCode": "chenyt",
"userId": 1063,
"userName": "陈烨婷"
},
{
"userCode": "cgy",
"userId": 1262,
"userName": "采购员P"
},
{
"userCode": "cyting",
"userId": 1164,
"userName": "cyting"
},
{
"userCode": "chaiyh",
"userId": 1694,
"userName": "chaiyh"
},
{
"userCode": "ces01",
"userId": 1512,
"userName": "测试一号"
},
{
"userCode": "ccc",
"userId": 1735,
"userName": "chenwx"
},
{
"userCode": "chenzq",
"userId": 1022,
"userName": "陈志强"
},
{
"userCode": "cyet",
"userId": 1168,
"userName": "cyet"
},
{
"userCode": "U01",
"userId": 1473,
"userName": "采购员"
}
],
"L": [
{
"userCode": "liangzhuo",
"userId": 1133,
"userName": "梁卓"
},
{
"userCode": "liujl",
"userId": 1393,
"userName": "刘嘉莉"
},
{
"userCode": "lvye",
"userId": 1144,
"userName": "吕烨"
},
{
"userCode": "lvhua",
"userId": 1167,
"userName": "吕骅"
},
{
"userCode": "lyya",
"userId": 1607,
"userName": "lyy"
},
{
"userCode": "linhm",
"userId": 959,
"userName": "林鸿敏"
},
{
"userCode": "liyujie",
"userId": 1134,
"userName": "李玉杰"
},
{
"userCode": "lwy",
"userId": 971,
"userName": "刘稳勇"
},
{
"userCode": "linyy",
"userId": 1743,
"userName": "林扬扬"
},
{
"userCode": "liyiming",
"userId": 1139,
"userName": "李一鸣"
},
{
"userCode": "liulinan",
"userId": 1141,
"userName": "liulinan"
},
{
"userCode": "linhm1",
"userId": 989,
"userName": "林鸿鸿"
},
{
"userCode": "linhm5",
"userId": 1125,
"userName": "林鸿"
},
{
"userCode": "linf",
"userId": 1647,
"userName": "林峰"
}
],
"M": [
{
"userCode": "miaque_l",
"userId": 985,
"userName": "米亚秋"
},
{
"userCode": "majie",
"userId": 1338,
"userName": "马杰"
},
{
"userCode": "miwz",
"userId": 1071,
"userName": "米伟中"
},
{
"userCode": "mwzh",
"userId": 1286,
"userName": "米"
},
{
"userCode": "miaque",
"userId": 984,
"userName": "马泉"
},
{
"userCode": "kevin",
"userId": 1339,
"userName": "马杰"
}
],
"H": [
{
"userCode": "hujingang",
"userId": 1138,
"userName": "胡金钢"
},
{
"userCode": "hongwl",
"userId": 1382,
"userName": "洪文龙"
},
{
"userCode": "huangby",
"userId": 1519,
"userName": "黄宝轶"
},
{
"userCode": "linhm3",
"userId": 1083,
"userName": "鸿敏"
},
{
"userCode": "hongzh",
"userId": 1715,
"userName": "洪圳鑫"
},
{
"userCode": "huz",
"userId": 1433,
"userName": "胡振"
},
{
"userCode": "huangxd",
"userId": 928,
"userName": "黄秀缎"
},
{
"userCode": "hxm01",
"userId": 1261,
"userName": "hxm01"
},
{
"userCode": "huxiaoming",
"userId": 1191,
"userName": "胡晓明"
},
{
"userCode": "henry001",
"userId": 1198,
"userName": "henry001"
}
],
"J": [
{
"userCode": "id001",
"userId": 1544,
"userName": "角色测试"
}
],
"K": [
{
"userCode": "kehongbin",
"userId": 1143,
"userName": "柯红兵"
},
{
"userCode": "zhengxk",
"userId": 1079,
"userName": "kay zheng"
},
{
"userCode": "10001",
"userId": 1296,
"userName": "考核用户"
},
{
"userCode": "kehb",
"userId": 1186,
"userName": "keran"
}
],
"T": [
{
"userCode": "test035",
"userId": 1341,
"userName": "test035"
},
{
"userCode": "test111",
"userId": 1420,
"userName": "test111"
},
{
"userCode": "tangzhb",
"userId": 1428,
"userName": "唐照波"
},
{
"userCode": "test100",
"userId": 1177,
"userName": "test"
},
{
"userCode": "test0001",
"userId": 1479,
"userName": "test0001"
}
],
"W": [
{
"userCode": "wuxii",
"userId": 920,
"userName": "吴欣"
},
{
"userCode": "wanglq",
"userId": 918,
"userName": "王利强"
},
{
"userCode": "CGJL",
"userId": 1069,
"userName": "王强"
},
{
"userCode": "wanglq2",
"userId": 919,
"userName": "王励勤"
},
{
"userCode": "hal",
"userId": 929,
"userName": "王海玲"
},
{
"userCode": "wangjianjun",
"userId": 1136,
"userName": "王建军"
},
{
"userCode": "wuwq",
"userId": 1315,
"userName": "吴文祈"
},
{
"userCode": "wenmb",
"userId": 1159,
"userName": "wenmb"
},
{
"userCode": "weijb",
"userId": 1431,
"userName": "魏金波2"
}
],
"Q": [
{
"userCode": "20170504",
"userId": 1736,
"userName": "青年"
},
{
"userCode": "quyanbin",
"userId": 1617,
"userName": "曲延斌"
}
],
"P": [
{
"userCode": "pff",
"userId": 1532,
"userName": "panfan01"
},
{
"userCode": "pan",
"userId": 1029,
"userName": "潘盼盼"
},
{
"userCode": "panfan",
"userId": 993,
"userName": "潘凡"
}
],
"S": [
{
"userCode": "ceshi001",
"userId": 1478,
"userName": "十一月"
},
{
"userCode": "shizb",
"userId": 1432,
"userName": "石头皮"
},
{
"userCode": "srmpx",
"userId": 1181,
"userName": "SRM培训用户"
},
{
"userCode": "shilei",
"userId": 1147,
"userName": "石磊"
}
],
"R": [
{
"userCode": "renrn",
"userId": 1011,
"userName": "任若男"
}
],
"Y": [
{
"userCode": "yansj",
"userId": 1434,
"userName": "yansj"
},
{
"userCode": "USER0",
"userId": 1095,
"userName": "演示用户"
},
{
"userCode": "user_liyiming",
"userId": 1183,
"userName": "用户测试liyiming"
},
{
"userCode": "YS_User",
"userId": 1034,
"userName": "演示用户"
},
{
"userCode": "yanglb",
"userId": 1350,
"userName": "杨凌斌"
},
{
"userCode": "lyy123",
"userId": 1080,
"userName": "岩岩"
}
],
"X": [
{
"userCode": "xufqslz",
"userId": 1030,
"userName": "徐峰"
},
{
"userCode": "xufq",
"userId": 990,
"userName": "许风琴"
},
{
"userCode": "xiaodongyan",
"userId": 1140,
"userName": "肖冬艳"
},
{
"userCode": "xufqb",
"userId": 953,
"userName": "许风琴"
},
{
"userCode": "xufqss",
"userId": 987,
"userName": "许风琴(价格)"
},
{
"userCode": "xdyuser",
"userId": 1179,
"userName": "xdy用户"
},
{
"userCode": "linhm2",
"userId": 1082,
"userName": "小林"
},
{
"userCode": "HCKSZYJS",
"userId": 1285,
"userName": "许辉程"
},
{
"userCode": "xieyj",
"userId": 1359,
"userName": "谢悦健"
},
{
"userCode": "xuhc",
"userId": 1058,
"userName": "许辉程"
},
{
"userCode": "xqy",
"userId": 1165,
"userName": "xqy"
},
{
"userCode": "xiongqiaoyi",
"userId": 1142,
"userName": "熊乔毅"
},
{
"userCode": "xufqsl",
"userId": 1015,
"userName": "徐峰勤"
},
{
"userCode": "xufqbase",
"userId": 1087,
"userName": "许风琴"
},
{
"userCode": "xuqc",
"userId": 1363,
"userName": "徐权春"
}
],
"Z": [
{
"userCode": "zhangll",
"userId": 992,
"userName": "张丽玲"
},
{
"userCode": "zhaohui",
"userId": 1135,
"userName": "赵辉"
},
{
"userCode": "zhangyan",
"userId": 1137,
"userName": "张岩"
},
{
"userCode": "zyuser",
"userId": 1175,
"userName": "zyuser"
},
{
"userCode": "xm123",
"userId": 1615,
"userName": "张三"
},
{
"userCode": "zhuyx",
"userId": 1192,
"userName": "朱燕贤"
},
{
"userCode": "zhangxy",
"userId": 1704,
"userName": "张学友"
},
{
"userCode": "zhjfztb",
"userId": 1012,
"userName": "郑剑锋(招投标)"
},
{
"userCode": "t001",
"userId": 1448,
"userName": "张三三三"
},
{
"userCode": "zhjh",
"userId": 1717,
"userName": "zhjh"
},
{
"userCode": "zhtest",
"userId": 1180,
"userName": "zhtest"
}
]
}