ionic3 联系人列表

项目中用到，记录一下，未添加搜索功能，使用技术 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"
        }
    ]
}