ionic 2 起航 控件的使用 客戶列表場景(二)

　　首先放出我hithub項目代碼例子，有興趣研究探討的同學可以去看看

      https://github.com/linyuebin2016/ionic2.git

      

      下面我們來嘗試下第一個項目場景

       一份客戶的列表，和頂部一個搜索框

 

       新建一個customer文件夾，里面放2個文件 customer.html，customer.ts

       首先看看customer.html有什么東西。

      

     

<ion-navbar *navbar hideBackButton>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>客戶搜索</ion-title>
    <!--<ion-buttons end>
    <button (click)="scrollToTop()">確定 </button>
  </ion-buttons>-->
</ion-navbar>

<ion-content>
  <ion-searchbar 
   [(ngModel)]="searchQuery" 
   (input)="getItems($event)"
    placeholder="客戶名稱或客戶曾用名"
    ></ion-searchbar>
  

  <!--客戶列表-->
  <ion-list>
    <ion-list-header>客戶列表</ion-list-header>
    <ion-item   *ngFor="#item of items" (click)="openNavDetailsPage(item)">
      <h3><ion-icon name='person'></ion-icon> {{ item }}</h3>
    </ion-item>
  </ion-list>

1.ion-navbar這是頭部的導航部分
2.ion-content這是我們內容部分，相當於body
3.ion-content里面的控件有
　　ion-searchbar ion的搜索控件
　　ion-list  ion的列表控件 ，配合ion-item使用
　　ion-list-header 列表里的標題
　　ion-item  列表的項
　　ion-icon  項的圖標

下面我們看看ion-item的屬性
*ngFor="#item of items" 這里是angular2的知識，表示循環items這個集合，跟foreach有些類似
 然后我們就可以用 {{item}}循環輸出items拉

(click)="openNavDetailsPage(item)" 這是點擊事件，觸發事件就是后台的openNavDetailsPage方法，還可以把循環items的item作為參數傳遞進去

看看界面效果

下面看看后台代碼做了些什么，打開我們的customer.ts文件

/**
 * Created by linyuebin on 2016/4/15.
 */
import {Page,Platform} from 'ionic-angular';

@Page({
  templateUrl: 'build/pages/customer/customer.html'
})

export class CustomerPage {
  searchQuery: string = '';
  items: string[];

  constructor() {
    this.initializeItems();
  }

  initializeItems() {
    this.items = [
      '中華人民共和國中央人民遠光軟件信息管理委員會中央發展開發小小小小小組',
      '榆中縣城農電公司',
      'Buenos Aires',
      'Cairo',
      'Dhaka',
      'Edinburgh',
      'Geneva',
      'Genoa',
      'Glasglow',
      'Hanoi',
      'Hong Kong',
      'Islamabad',
      'Istanbul',
      'Jakarta',
      'Kiel',
      'Kyoto',
      'Le Havre',
      'Lebanon',
      'Lhasa',
      'Washington'
    ];
  }

 

 1.頭部import  導入我們所需要的ionic組件
 2.@Page({ templateUrl: 'build/pages/customer/customer.html' }) 這里指定我們的html頁面
 3.CustomerPage 定義一個類
   這里有2個屬性

  searchQuery: string = '';這是搜索用到的 items: string[];   這是我們html剛才看到用於循環的

4.constructor 這是customerPage類的構造方法
5.initializeItems() 這是customerpage類的一個方法。我們來初始化我們items的數據，我們給他一些客戶名稱。


下一章，將會介紹一下搜索怎么用。有不明白的同學聯系我們Twitter把