ionic3 Actionsheet的使用

1. 安装。使用时需要你已经安装好ionic Android环境

ionic cordova plugin add cordova-plugin-actionsheet

npm install --save @ionic-native/action-sheet

2.html代码

 
 

  
  

   
   <
   
   ion-header
   
   >
  
  
  
  
  
   
   <
   
   ion-navbar
   
   >
  
  
  
  
    
   
   <
   
   ion-title
   
   >actionsheets
   
   </
   
   ion-title
   
   >
  
  
  
  
  
   
   </
   
   ion-navbar
   
   >
  
  
  
  

   
   </
   
   ion-header
   
   >
  
  
  
  

   
   <
   
   ion-content
   
   >
  
  
  
  
  
   
   <
   
   button 
   
   ion-button (
   
   click)=
   
   "changeActionSheet()" 
   
   color=
   
   "danger"
   
   >Actionsheet
   
   </
   
   button
   
   >
  
  
  
  

   
   </
   
   ion-content
   
   >
  
  
 
 

3.ts代码

 
 

  
  

   
   import { 
   
   Component } 
   
   from 
   
   '@angular/core';
  
  
  
  

   
   import { 
   
   IonicPage, 
   
   NavController, 
   
   NavParams } 
   
   from 
   
   'ionic-angular';
  
  
  
  

   
   import { 
   
   ActionSheet, 
   
   ActionSheetOptions } 
   
   from 
   
   '@ionic-native/action-sheet';
  
  
  
  

   
   @
   
   IonicPage()
  
  
  
  

   
   @
   
   Component({
  
  
  
  
  
   
   selector: 
   
   'page-actionsheets',
  
  
  
  
  
   
   templateUrl: 
   
   'actionsheets.html',
  
  
  
  

   
   })
  
  
  
  

   
   export 
   
   class 
   
   ActionsheetsPage {
  
  

  
  
  
   
   constructor(
   
   public 
   
   navCtrl: 
   
   NavController, 
   
   public 
   
   navParams: 
   
   NavParams,
   
   private 
   
   actionSheet: 
   
   ActionSheet) {
  
  
  
  

   
     }
  
  
  
  
  
   
   ionViewDidLoad() {
  
  
  
  
    
   
   console.
   
   log(
   
   'ionViewDidLoad ActionsheetsPage');
  
  
  
  

   
     }
  
  
  
  
  
   
   changeActionSheet(){
  
  
  
  
    
   
   this.
   
   actionSheet.
   
   show(
   
   options).
   
   then((
   
   buttonIndex: 
   
   number) 
   
   => {
  
  
  
  
      
   
   console.
   
   log(
   
   'Button pressed: ' + 
   
   buttonIndex);
  
  
  
  

   
           });
  
  
  
  

   
     }
  
  
  
  

   
   }
  
  
  
  

   
   let 
   
   buttonLabels = [
   
   '确定', 
   
   '取消'];
  
  
  
  

   
   const 
   
   options: 
   
   ActionSheetOptions = {
  
  
  
  

   
   title: 
   
   '你确定删除吗',
  
  
  
  

   
   subtitle: 
   
   'Choose an action',
  
  
  
  

   
   buttonLabels: 
   
   buttonLabels,
  
  
  
  

   
   addCancelButtonWithLabel: 
   
   '返回',
  
  
  
  

   
   addDestructiveButtonWithLabel: 
   
   '删除',
  
  
  
  

   
   androidTheme:
   
   5,
  
  
  
  

   
   //主题是1到5，个人喜欢5 颜色黑字白底 简约
  
  
  
  

   
   destructiveButtonLast: 
   
   true
  
  
  
  

   
   };
  
  
 
 
4.module.ts

 
 

  
  

   
   import { 
   
   NgModule } 
   
   from 
   
   '@angular/core';
  
  
  
  

   
   import { 
   
   IonicPageModule } 
   
   from 
   
   'ionic-angular';
  
  
  
  

   
   import { 
   
   ActionsheetsPage  } 
   
   from 
   
   './actionsheets';
  
  
  
  

   
   import { 
   
   ActionSheet } 
   
   from 
   
   '@ionic-native/action-sheet';
  
  

  
  

   
   @
   
   NgModule({
  
  
  
  
  
   
   declarations: [
  
  
  
  
    
   
   ActionsheetsPage,
  
  
  
  

   
     ],
  
  
  
  
  
   
   imports: [
  
  
  
  
    
   
   IonicPageModule.
   
   forChild(
   
   ActionsheetsPage),
  
  
  
  

   
     ],
  
  
  
  
  
   
   providers: [
  
  
  
  
    
   
   ActionSheet
  
  
  
  

   
     ]
  
  
  
  

   
   })
  
  


  
  

   
   export 
   
   class 
   
   ActionsheetsPageModule {
  
  
  
  
  
   
   constructor() {}
  
  

  
  

   
   }