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();

}

大功告成！