http://blog.csdn.net/h254532699/article/details/54382123

使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了，意味着你可以设计更好的app而不需要很强的用户体检设计背景，而且让你可以更容易实现这些模式。

这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表，当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式。本教程将涵盖创建这个滑动删除按钮所需要的一切。

伦理片 http://www.dotdy.com/  @Page({ templateUrl: 'app/home/home.html', }) export class HomePage { constructor() {} }

constructor 方法在组件创建是执行，因此我们在这里准备试验数据。你可能已经注意到我们已经给这个组件定义了模版，随后将展示如何在模版中使用在这里添加的数据。

home.js 文件修改如下：

import {Page} from 'ionic/ionic'

@Page({
  templateUrl: 'app/home/home.html',
})
export class HomePage {
  constructor() {

    this.items = [
        {title: 'item1'},
        {title: 'item2'},
        {title: 'item3'},
        {title: 'item4'},
        {title: 'item5'},
        {title: 'item6'}
    ];

  }
}

现在我们有一些数据可以删除了。

测试数据中删除一项。

ionic2 tabs使用 Modal底部tab弹出框

项目要实现一个功能，在首页底部中间的tab弹出一个页面，而且是没有底部栏的，而不是像平常滑动的一个子页面。

像这样：

做法其实很简单

1.修改tabs.html中的tab，去掉[root]="tab2root"属性，就不会显示子页面了

2.添加(ionSelect)方法，点击这个tab按钮的事件，用来显示你的弹出modal

去掉之前：

1. <ion-tab [root]="tab5Root"  tabIcon="call" (ionSelect)="call()" >ion-tab>  

去掉之后：

1. <ion-tab   tabIcon="call" (ionSelect)="call()" >ion-tab>  

3.在tabs.ts中显示实现(ionSelect)方法的call()方法，以显示modal

• 引入ModalController

1. import { NavController, NavParams,ModalController,ViewController,Tabs } from 'ionic-angular';  

• 声明ModalController

1. constructor(public navCtrl: NavController, public navParams: NavParams,<span style="color:#ff0000;">public modalCtrl: ModalController,span>public viewCtrl: ViewController) {  
2.   
3.   }  

• 实现call方法

1. call(){  
2.   let modal = this.modalCtrl.create(CallModalPage);  
3.   modal.present();  
4.    
5. }  

大功告成！