Ionic 2 ：如何实现列表滑动删除按钮

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

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

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

 

删除例子

1.建立Ionic2应用

经过如下命令行语句建立新的Ionic2应用：

ionic start ionic2-delete blank --v2

这里我使用了–v2标志位，为了告诉Ionic命令行咱们建立的是Ionic2项目。

2.准备列表数据

咱们须要一些维护数据，所以要创建一些试验数据。建立咱们项目的blank模版默认创建了一个Home组件，这个教程咱们就在此基础上修改。
既然Ionic2还很新，我将这些步骤尽可能阐述详细，下面咱们看看app/home/home.js文件：

import {Page} from 'ionic/ionic' 伦理片 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'} ]; } }

如今咱们有一些数据能够删除了。

3.修改主页（HOME）的模版

接下来咱们编辑home.html来创建模版。如今的模版是包含一些建立<ion-card>的代码，而咱们要用<ion-list>来代替：

修改 home.html以下：

<ion-navbar *navbar> <ion-title> Home </ion-title> </ion-navbar> <ion-content> <ion-list> <ion-item> I'm just a plain old item in a list... </ion-item> </ion-list> </ion-content>

这只是建立了只有一个单项的列表，接着咱们将添加滑动元素。

继续修改home.html以下：

<ion-navbar *navbar> <ion-title> Home </ion-title> </ion-navbar> <ion-content> <ion-list> <ion-item-sliding> <ion-item> Swipe me to the left </ion-item> <ion-item-options> <button danger (click)="removeItem()"><icon trash></icon> Delete</button> </ion-item-options> </ion-item-sliding> </ion-list> </ion-content>

经过上下对比，你应该看到：咱们用ion-item-sliding替换了ion-item 。这容许咱们建立一个ion-item-options 部件，当用户滑动列表元素时，它将显示出来。
这段代码还建立了一个删除按钮，当ion-item-options部件显示出来时，能够点击按钮，这时会触发类中定义的removeItem （暂无，接下来添加）。另外，咱们不止是一个单项，咱们要为咱们建立的数组的每个数据建立滑动项，这里我使用ng-for。

仍是修改home.html以下：

<ion-navbar *navbar> <ion-title> Home </ion-title> </ion-navbar> <ion-content> <ion-list> <ion-item-sliding *ng-for="#item of items"> <ion-item> {{item.title}} </ion-item> <ion-item-options> <button danger (click)="removeItem(item)"><icon trash></icon> Delete</button> </ion-item-options> </ion-item-sliding> </ion-list> </ion-content>

如今咱们循环在类中定义的items数组的每一个item项，而后为每一个项建立一个 ion-item-sliding指令。注意咱们使用的是#item而不是item。这将建立一个本地引用到迭代得到的item，这让咱们能够使用 { {item.title} } 输出标题，它还容许咱们传递item的引用到咱们的 removeItem 函数。
咱们如今有了一个列表包含全部数据，用户能够滑动并显示出一个delete按钮。如今剩下的是当用户点击时作点什么事。所以咱们设置一个简单监听以便调用方法从咱们先前建立的测试数据中删除一项。

4.建立方法删除数据

如今咱们去到 home.js 文件编写方法处理数据删除。当前但删除按钮被点击时传送一个数据项给 removeItem。相似的，你能够很是容易的实现例如删除、编辑、分享、播放动画等你须要的东西，不只是删除。

修改 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'} ]; } removeItem(item){ for(i = 0; i < this.items.length; i++) { if(this.items[i] == item){ this.items.splice(i, 1); } } } }

如今你向左侧滑动列表项，而后点击删除按钮，它就会从列表中删除。就像下面这样：

 

删除例子

5.添加一个编辑按钮

这里将不会将Edit按钮的全过程走一遍，可是你能够轻易扩展活动项并添加编辑按钮，以下所示：

<ion-item-options> <button primary>Edit</button> <button danger (click)="removeItem(item)"><icon trash></icon> Delete</button> </ion-item-options>

如今滑动时你有两个按钮了，看下面：

 

添加编辑按钮

而后你能够编写Edit按钮的点击事件了，具体取决于你的需求。

总结

Ionic2 这个特性真是太棒了，不只能删除，还能轻易的添加其它按钮。
这同时也是一个很是完美的UI元素节省屏幕空间，不会显示这些信息除非你滑动屏幕。

 

 

ionic2 tabs使用 Modal底部tab弹出框

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

像这样：

作法其实很简单

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

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

去掉以前：

 

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

去掉以后：

 

 

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

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

 

 

• 引入ModalController

 

 

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

• 声明ModalController

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

  }

• 实现call方法

call(){
  let modal = this.modalCtrl.create(CallModalPage);
  modal.present();

}

大功告成！