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开始菜单项开发的控件,同样支持右侧箭头,由于使用场合的不同,本控件中右键箭头不作为菜单扩展,而是通过事件触发式响应. 先上图 代码很简单,点击对右侧箭头区域点击的响 ...
随机推荐
- HDU - 6344 2018百度之星资格赛 1001调查问卷(状压dp)
调查问卷 Accepts: 1289 Submissions: 5642 Time Limit: 6500/6000 MS (Java/Others) Memory Limit: 262144 ...
- 数据库路由中间件MyCat - 使用篇(6)
此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 配置MyCat 4. 配置schema.xml schema.xml里面管理着MyCat的逻辑库.表,每张表 ...
- keycode和which
firefox 中不支持keyCode ie9-- 不支持which firefox:上下左右键会触发kepress. chrome: 上下左右键不会触发kepress. oprea:上下左右键不会触 ...
- Zjnu Stadium(加权并查集)
Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- pytest框架(一)
代码示例一 # coding=utf-8 def func(x): return x + 1 def test_answer(): assert func(3) == 5 运行结果 E:\pyYouY ...
- 剑指Offer的学习笔记(C#篇)-- 序列化二叉树
题目描述 请实现两个函数,分别用来序列化和反序列化二叉树 一 . 理解题意 二叉树的序列化,是将一个结构化的东西变成扁平化的字符串,序列化二叉树或者是反序列化二叉树就是二叉树和扩展二叉树遍历序列之间的 ...
- 两数之和LeetCode
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...
- go系列(6)- beego日志模块的使用
1.安装日志模块 切换到工作目录,下载日志模块 cd /data/work/go/ go get github.com/astaxie/beego/logs 2.导入日志模块 使用的时候,需要导入模块 ...
- 上传、裁剪图片-----Jcrop图片裁剪插件
Jcrop文档:http://code.ciaoca.com/jquery/jcrop/C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/293 ...
- hdu4403- A very hard Aoshu problem(搜索)
枚举等号的位置,然后暴力搜索一波 这个题本身不难,但它是我第一次使用对拍程序来查找错误,值得纪念. #include<cstdio> #include<string.h> #i ...