ionic2中实现上拉菜单并且修改默认样式也就是自定义样式。ActionSheets。以更换/上传头像为例.

学习笔记有参考，有翻译，有自己的感悟

先看实例代码：

步骤：

1.在ts文件中引入组件：

import { ActionSheetController } from 'ionic-angular';

2.在construct构造函数中声明注入：

 constructor(public navCtrl: NavController,public actionSheetCtrl: ActionSheetController) {}

3.编写Action Sheets组件的方法：

actionsheet() {
  let actionSheet =this.actionSheetCtrl.create({
    title: '更换头像',
    cssClass:'head',
    buttons: [
      {
        cssClass:'pai',
        text: '拍照',
        icon: 'ios-arrow-forward',
        role: 'destructive',
        handler: () => {
          console.log('Destructive clicked');
        }
      },{
        text: '从相册选择',
        icon: 'ios-arrow-forward',
        handler: () => {
          console.log('Archive clicked');
        }
      },{
        text: '取消',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }}
    ]
  });

  actionSheet.present();

}

4.注：其中cssClass是关键，是定义的这个弹窗的class名，可以根据这个class名对弹窗进行样式的自定义，这个class名的使用一定要在app文件夹里面的app.scss里面进行修改，不然不起作用。buttons里面的icon是添加ionic自带的图标的

除了注意SCSS必须卸载app.scss里面才有用呢另外自己所需要的样式可以在firebar或者审查元素查看控制当前样式的类名，然后对类样式进行重新定义

app.scss文件代码：

.head{
  .action-sheet-group{
    .action-sheet-title{
      padding: 1rem;
      font-size: 20px;
      color: #000;
      background-color:pink;
    }
    .disable-hover{
      min-height: auto;
      font-size: 18px;
      color: #000;
      background: #fff;
      position: relative;
      .button-inner{
        position: relative;
        .action-sheet-icon{
          position: absolute;
          right: 4px;
        }
      }
    }
    .action-sheet-cancel{
      background: #fefef9;
      .button-inner{
        justify-content:center;
        font-weight: normal;
      }
    }
  }
}

完整html:

 

<h2 (click)="actionsheet()">actionsheet</h2>

完整ts:

import { Component }     from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage, ActionSheetController }  from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public  simpleColumns: any[];//先定义一个任意类型的数组来接收参数
  constructor(public navCtrl: NavController,public actionSheetCtrl:ActionSheetController) {
    this.simpleColumns = [
      {
        name: 'col1',//列名，一个对象表示一列多选，一个multipicker有几列选项就有几个对象
        options: [ //每一列的选项集
          { text: '选项1', value: '选项1' },
          { text: '选项2', value: '选项2' },
          { text: '选项3', value: '选项3' }
        ]
      },{
        name: 'col2',
        options: [
          { text: '1-1', value: '1-1' },
          { text: '1-2', value: '1-2' },
          { text: '2-1', value: '2-1' },
          { text: '2-2', value: '2-2' },
          { text: '3-1', value: '3-1' }
        ]
      },{
        name: 'col3',
        options: [
          { text: '1-1-1', value: '1-1-1' },
          { text: '1-1-2', value: '1-1-2' },
          { text: '1-2-1', value: '1-2-1' },
          { text: '1-2-2', value: '1-2-2' },
          { text: '2-1-1', value: '2-1-1' },
          { text: '2-1-2', value: '2-1-2' },
          { text: '2-2-1', value: '2-2-1' },
          { text: '2-2-2', value: '2-2-2' },
          { text: '3-1-1', value: '3-1-1' },
          { text: '3-1-2', value: '3-1-2' }
        ]
      }
    ];
  }

  actionsheet() {
    let actionSheet =this.actionSheetCtrl.create({
      title: '更换头像',
      cssClass:'head',
      buttons: [
        {
          cssClass:'pai',
          text: '拍照',
          icon: 'ios-arrow-forward',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: '从相册选择',
          icon: 'ios-arrow-forward',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: '取消',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }}
      ]
    });

    actionSheet.present();

  }
}

效果：

完整知识翻译自官网同时加上自己的理解：

     

       ActionSheet是一个对话框，让用户选择一个选项。而且用户必须要选择其中一个选项才能恢复与应用程序的交互（点击背景会执行 cancel的事件）。当然也可以利用背景或者后退键来取消对话框从而恢复和程序的交互。

        ActionSheet会从一个 button数组创建它的按钮选项。每一个按钮都拥有一些属性，例如 text handler role等等。如果 handler返回 false时，ActionSheet将不会消失。ActionSheet还可以选择有一个标题和副标题。

         如果有一个button的 role被设置为 cancel那么这个按钮不管位于按钮数组的哪个位置它都会位于底部。ionic官方建议 destructive类型的按钮最好位于数组的第一个位置。另外，如果ActionSheet是由于点击背景而被取消的，那么它将会执行和 cancle类型的按钮点击一样的事件。

注意：如果有两个 cancle类型的按钮，那么最后一个 cancel类型的按钮会覆盖掉前面所有的 cancel类型的按钮。

      您可以在create方法的第一个参数中传递所有操作工作表的选项：ActionSheet.create（opts）。 否则，操作表的实例有添加选项的方法，如setTitle（）或addButton（）。

用法：

import { ActionSheetController } from 'ionic-angular'

export class MyClass{

constructor( public actionSheetCtrl: ActionSheetController) {}

presentActionSheet() {

let actionSheet = this. actionSheetCtrl. create({

title: 'Modify your album', //上拉选项的标题

buttons: [ //选项按钮的对象集

{

text: 'Destructive', //选择按钮上的文字

role: 'destructive', //角色，不同的角色样式呈现不一样

handler: () => {

console. log( 'Destructive clicked'); //点击选项后执行的内容

}

},

{

text: 'Archive',

handler: () => {

console. log( 'Archive clicked');

}

},

{

text: 'Cancel',

role: 'cancel',

handler: () => {

console. log( 'Cancel clicked');

}

}

]

});

actionSheet. present();

}

}

实例成员：

create(opts)

let actionSheet = this. actionSheetCtrl. create({

title: '更换头像',

cssClass: 'head',

buttons: [

{

   cssClass: 'pai',

text: '拍照',

role: 'destructive',

handler: () => {

console. log( 'Destructive clicked');

}

}

]

}

静态方法

create(opts)

属性名称	类型	描述
title	string	ActionSheet的标题
subTitle	string	ActionSheet的副标题
cssClass	string	自定义样式的css类
enableBackdropDismiss	boolean	用户点击背景是否关闭ActionSheet
buttons	array<any>	显示的按钮的数组

按钮的属性

属性名称	类型	描述
text	string	按钮上显示的文字
icon	icon	按钮上显示的图标
handler	any	点击后执行的函数
cssClass	stirng
role	string	如何显示按钮， destructive或者 cancel。如果没有设置此选项，那么将显示默认的按钮。

实例方法

setTitle(title)

属性名称	类型	描述
title	string	设置ActionSheet的标题

setSubTitle(subTitle)

属性名称	类型	描述
subTitle	string	设置ActionSheet的子标题

addButton(button)

属性名称	类型	描述
button	object	ActionSheet的按钮。

取消和异步导航

    在一个动作表被关闭后，应用程序可能还需要根据处理程序的逻辑转换到另一个页面。然而，由于在大致相同的时间触发了多个转换，导航控制器很难对多个可能被异步启动的转换进行动画生成动画。这在Nav Transition Promises部分进一步描述。对于动作单，这意味着在同一导航控制器开始新的转换之前，最好等待动作单完成转换。

     在下面的示例中，在按钮被单击之后，其处理程序等待异步操作完成，然后使用pop来浏览同一堆栈中的页面。潜在的问题是异步操作可能已经在操作表甚至完成转换之前完成。在这种情况下，最好确保操作表首先完成过渡，然后开始下一个转换。

let actionSheet = this. actionSheetCtrl. create({

title: 'Hello',

buttons: [{

text: 'Ok',

handler: () => {

// user has clicked the action sheet button用户已经点击动作表按钮

// begin the action sheet's dimiss transition开始actionsheet解除转换

let navTransition = actionSheet. dismiss();

// start some async method启动一些异步方法

someAsyncOperation(). then(() => {

// once the async operation has completed一旦异步操作完成

// then run the next nav transition after the然后运行下一个导航过渡

// first transition has finished animating out第一次转换已经完成动画

navTransition. then(() => {

this. nav. pop();

});

});

return false;

}

}]

});

actionSheet. present();

请注意，处理程序返回false。 按钮处理程序的一个功能是当他们点击按钮时自动关闭操作工作表，但是我们需要更多的关于转换的控制。 因为处理程序返回false，所以操作表不会自动关闭。 相反，您现在可以完全控制操作表完成转换的时间，以及在开始新的转换之前等待操作表完成转换的功能。