ionic2 名字分组手机通讯录 组件
实现以下功能
- 获取手机通讯录数据
- 数据分组显示(中文英文正确分组)
- 点击索引进行跳转
- 滚动到特殊位置进行特别处理
- 联系人查询
预览
<ion-header>
<ion-navbar>
<ion-title>选择联系人</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-searchbar [debounce]="searchDebounce" [(ngModel)]="searchKey"
[showCancelButton]="shouldShowCancel"
(ionInput)="onInput($event)" (ionCancel)="onCancel($event)">
</ion-searchbar>
<ion-row style="height: 88%">
<ion-col col-11 >
<!-- <div *ngIf="!contactList||contactList.length<=0">
<div >手机通讯录没有联系人</div>
</div> -->
<ion-scroll #scroll scrollY="true" style="height: 100%">
<ion-item-group *ngFor="let contactItem of contactList" >
<ion-item-divider color="light" id="index_{{contactItem.letter}}">
{{contactItem.letter}}
</ion-item-divider>
<ion-item *ngFor="let contact of contactItem.contact" (click)="selectContact(contact)">
<!-- <ion-avatar item-start>
<img src="assets/icon/favicon.ico">
</ion-avatar> -->
<h2> {{contact.displayName}}</h2>
<p>手机:{{contact.phoneNumbers[0].value}}</p>
</ion-item>
</ion-item-group>
</ion-scroll>
</ion-col>
<ion-col col-1 class="index-num">
<div *ngFor="let indexItem of contactIndex" (click)="goToIndex(indexItem)">{{indexItem}}</div>
</ion-col>
</ion-row>
</ion-content>
.index-num{
color:blue;
font-size: 13px;
}
.scroll-content{
padding:0px !important
}
.red-index{
color:red;
}
import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Contacts } from '@ionic-native/Contacts';
import { CommonUtil } from '../common.util';
@Component({
selector: 'contacts',
templateUrl: 'contacts.html'
})
/**
联系人组件
@author 0o晓月メ
*/
export class ContactsComponent {
@ViewChild('scroll') scroll: any;
private contactList: any;
private contactIndex: Array<string>;
private searchKey: string;
private shouldShowCancel: boolean;
public isCordova: boolean;
public searchDebounce: number = 600;
public currentId:string;
private isIOS:boolean;
constructor(private commonUtil: CommonUtil, private contacts: Contacts, public navCtrl: NavController, public navParams: NavParams) {
this.initData();
}
/**
滚动到特定位置做特殊处理 demo
*/
ngAfterViewInit() {
if(!this.isCordova){
this.scroll.addScrollEventListener((event) => {
let positionN = document.getElementById('index_' + 'N').offsetTop;
let positionS = document.getElementById('index_' + 'S').offsetTop;
if (event.currentTarget.scrollTop > positionN && event.currentTarget.scrollTop < positionS) {
console.log('在模块N');
this.currentId ='N';
} else if (event.currentTarget.scrollTop > positionS) {
console.log('在模块S');
this.currentId ='S';
} else {
this.currentId ='';
console.log('还没到达N模块');
}
});
}
}
initData(): void {
this.searchKey = "";
this.shouldShowCancel = true;
this.isCordova = this.commonUtil.isCordova();
this.isIOS = this.commonUtil.isIOS();
this.contactIndex = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
//alert( .isCordova)
if (this.isCordova) {
let opts = {
filter: "",
multiple: true,
hasPhoneNumber: true,
fields: ['displayName', 'name']
};
let me = this;
this.contacts.find(['displayName', 'name'], opts)
.then((contactList) => {
me.contactList = contactList;
console.log(contactList)
me.generateContactGroup(contactList);
}, (error) => {
console.log(error);
});
} else {
let data = this.initBrowserData();
this.generateContactGroup(data);
}
}
/**
调用callback方法传送选择的联系信息,再跳回上一个页面
demo:
this.navCtrl.push(ContactComponent,{callback:this.callBackTest,scope:this});
callBackTest(param):Promise<any>{
let me = this;
return new Promise(resolve => {
me.recommendPhone = param.phoneNumbers[0].value;;
console.log(me.recommendPhone);
resolve('success');
})
}
*/
selectContact(contact): void {
if (!contact) contact = null;
let callback = this.navParams.get("callback");
let scope = this.navParams.get("scope");
if (!callback || !scope) {
alert('Callback function or scope is not provide!');
return;
}
callback.call(scope, contact).then(() => {
this.navCtrl.pop();
});
}
onInput($event): void {
console.log($event);
if (this.isCordova) {
let opts = {
filter: this.searchKey,
multiple: true,
hasPhoneNumber: true,
fields: ['displayName', 'name']
};
this.contacts.find(['displayName', 'name'], opts)
.then((contactList) => {
this.contactList = contactList;
console.log(contactList)
this.generateContactGroup(contactList);
}, (error) => {
console.log(error);
});
} else {
let data = this.initBrowserData();
this.generateContactGroup(data);
}
}
onCancel($event): void {
}
/**
联系人分组
*/
generateContactGroup(arr) {
if (!String.prototype.localeCompare) {
console.error('localeCompare function not found');
return [];
}
//enTmp cnArray
let enResult = this.sortEnContacts(arr);
console.log('generateContactGroup=>enResult', enResult);
let sortResult = enResult.enTmp;
let cnArray = enResult.cnArray;
let enKey = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
let letters = "*abcdefghjklmnopqrstwxyz".split('');
let zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
for (let i = 0; i < letters.length; i++) {
let letter = letters[i].toUpperCase();
let curr;
if (sortResult[letter]) {
curr = sortResult[letter];
} else if ('*' != letters[i]) {
curr = sortResult[letter] = [];
}
for (var j = 0; j < cnArray.length; j++) {
if ((!zh[i - 1] || zh[i - 1].localeCompare(cnArray[j].displayName,'zh') <= 0) && cnArray[j].displayName.localeCompare(zh[i],'zh') == -1) {
curr.push(cnArray[j]);
}
}
}
let contactResult = [];
for (let k = 0; k < enKey.length; k++) {
let item = sortResult[enKey[k]];
if (item && item.length > 0)
contactResult.push({ letter: enKey[k], contact: item });
}
console.log(contactResult);
this.contactList = contactResult;
return contactResult;
}
/**
联系人英文名字先分组
*/
sortEnContacts(contactList: Array<any>) {
let en = ['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'];
let enTmp = {};
let cnArray = [];
for (var i = 0; i < contactList.length; i++) {
if( this.isIOS && this.isCordova){
contactList[i].displayName = contactList[i].name.formatted;
}
let letter = contactList[i].displayName.toUpperCase().charAt(0);
if (en.indexOf(letter) >= 0) {
if (enTmp[letter] == undefined) {
enTmp[letter] = []
}
enTmp[letter].push(contactList[i]);
} else {
cnArray.push(contactList[i])
}
}
return { 'enTmp': enTmp, 'cnArray': cnArray };
}
goToIndex(letter): void {
console.log(letter);
let target = document.getElementById('index_' + letter);
if (target)
this.scroll._scrollContent.nativeElement.scrollTop = target.offsetTop;
}
initBrowserData(): Array<any> {
return [{ displayName: 'jack', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '陈先生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '吴先生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '王先生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '林小姐', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '冯先生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '蒋生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '黄生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'jack', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'mike', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'ivin', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'kevin', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '谁', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '张小姐', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '好', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'tag', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'ok', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'jack', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'fary', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'note', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'may', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'moon', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '月', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '辉', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '明', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: '郭生', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'kity', phoneNumbers: [{ value: "13626578952" }] },
{ displayName: 'marry', phoneNumbers: [{ value: "13626578952" }] },
];
}
}
