ionic 2 起航 控件的使用 客户列表场景(二)
2024-09-29 16:11:09
首先放出我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把
最新文章
- idea之resource配置
- android6.0 适配的问题——activity销毁的问题
- Linux Communication Mechanism Summarize
- PLSQL_PLSQL调优健康检查脚本SQLHC(案例)
- MyEclipse — Maven+Spring+Struts+Hibernate 整合 [学习笔记-4]
- activemq 异步和同步接收
- 开启nginx缓存
- Memo打印1
- mybatis mapper namespace
- MVC中配置OutputCache的VaryByParam参数无效的问题
- placeholder 兼容 IE
- mysql笔记6之数据类型
- 虚拟主机,VPS,云主机之间的区别?
- ADB——keyevent命令
- zabbix3.4.7Web页面监控
- 【知了堂学习笔记】java 编写几种常见排序算法2
- css纯字母或者字母换行显示
- k:特殊的线性表—栈
- 【LG4103】[HEOI2014]大工程
- Python map/reduce/filter/sorted函数以及匿名函数