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把

    

转载于:https://www.cnblogs.com/Linyb/p/5433696.html