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把
ionic 2 起航 控件的使用 客户列表场景(二)的更多相关文章
- ionic 2 起航 控件的使用 客户列表场景(四)
接下来,我们的客户列表要怎么刷新数据呢? 我们不会安卓开发,不会ios开发,没关系,我们还有ionic 2.ionic 2的控件 Ion-refresher 轻松帮我们搞掂. <!--下拉刷新- ...
- ionic 2 起航 控件的使用 客户列表场景(三)
我们来看看客户列表的搜索控件是怎么工作的吧. 1.打开customer.html <ion-content> <ion-searchbar [(ngModel)]="sea ...
- WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (二)
WinForm界面布局控件WeifenLuo.WinFormsUI.Docking"的使用 (二) 编写人:CC阿爸 2015-1-29 今天我想与大家继续一起分享这一伟大的控件.有兴趣的同 ...
- 常用控件产品官方文档/手册/API列表 c#控件文档API列表 asp.net控件产品技术文档中文版
.netCHARTING报表图表控件 文档帮助手册Ab3d.PowerToys 文档帮助手册Ab3d.Reader3ds 文档帮助手册ABViewer 文档帮助手册 (工程图纸文档管理系统)Activ ...
- DevExpress控件使用经验总结- GridView列表行号显示操作
DevExpress是一个比较有名的界面控件套件,提供了一系列的界面控件套件的DotNet界面控件.本文主要介绍我在使用DevExpress控件过程中,遇到或者发现的一些问题解决方案,或者也可以所示一 ...
- [iOS基础控件 - 4.2] APP列表 字典转模型Model
A.使用字典加载数据的缺点 1.用户自行指定key,容易出错 2.存入.取出都需要key,容易混乱 B.模型 (MVC中的model) 1.字典与模型对比: (1)字典:存储数据,通过字符串类型的 ...
- WP8.1开发中ListView控件加载图列表的简单使用(1)
我也是刚接触WP编程没几个月,就是在这段时间一直闲着没事,然后又比较喜欢WP这款系统,就学习了WP这方面的开发言语,自学是很困难的,掌握这方面的资料不多,很初级,就是自己在网上找资料学习过程中,看到别 ...
- DS控件库 Win7链接列表框的仿Windows开始菜单样式
Win7链接列表框是依照Windows7的开始菜单开发的,同时进行了属性和功能的扩展. 效果图 项属性 控件属性 控件主要事件 点击项(Sender As Win7链接列表框, Itm As 链接项, ...
- DS控件库 Win7链接列表框效果1:右侧箭头
Win7链接列表框是仿Windos7开始菜单项开发的控件,同样支持右侧箭头,由于使用场合的不同,本控件中右键箭头不作为菜单扩展,而是通过事件触发式响应. 先上图 代码很简单,点击对右侧箭头区域点击的响 ...
随机推荐
- 数据结构&算法 索引
最近在看牛客网的算法课,准备开个坑,根据自己的理解,把课程讲到的内容列一个大纲,明年找工作的时候用. 再加上看算法第四版的内容,整理一套明年找工作能够直接拿出来用的代码. 此篇博文作为索引.
- JAVA基础--IO输入输出(File使用)17
一. File中的方法 1. 列举方法 /* * 获取指定目录以及子目录下的所有文件和文件夹 */ public class ListFilesDemo { public static void m ...
- CentOS软件包管理
rpm安装包管理 指令 说明 rpm -i XX.rpm 安装XX.rpm软件包 rpm -qa XX 查看XX软件包安装的所有文件 rpm -e XX 卸载XX软件包 yum管理软件 指令 说明 y ...
- 732. My Calendar III (prev)
Implement a MyCalendarThree class to store your events. A new event can always be added. Your class ...
- sessionStorage二种存值取值的方法
//方法一 sessionStorage.setItem('id1','这是一个测试id1'); //存入一个值key:value console.log(sessionStorage.getItem ...
- Java无模板导出Excel,Apache-POI插件实现
开发环境 jdk 1.8 Maven 3.6 Tomcat 8.5 SpringBoot 2.1.4.RELEASE Apache-POI 3.6 Idea 注意: 我是在现有的基于SpringBoo ...
- Luogu P1637 三元上升子序列【权值线段树】By cellur925
题目传送门 emmm..不开结构体的线段树真香! 首先我们知道"三元上升子序列"的个数就是对于序列中的每个数,**它左边比他小的数*它右边比他大的数**.但是如何快速求出这两个数? ...
- SpringMVC之DispatcherServlet类
一.DispatcherServlet是什么 DispatcherServlet是前置控制器,配置在web.xml文件中的.拦截匹配的请求,Servlet拦截匹配规则要自已定义,把拦截下来的请求,依据 ...
- Sublime Text 3 配置 sass
先安装Sublime Text的sass 和 sass build插件, Sublime Text新建一个test.scss文件 $color: #369; body { backgroun ...
- WC-第二次作业
WordCount 第二次作业 码云地址:https://gitee.com/lgcj1218/WordCount/tree/master 一.解题思路 本次作业采用的c#语言 按功能分为了三个类 , ...