ionic3 操作菜单的使用

ionic中，使用ActionSheetController 来实现操作菜单的展示

html编码

  <button ion-button block (click)="openMenu()">
    操作菜单
  </button>

ts编码

引入 import { ActionSheetController } from 'ionic-angular'

openMenu() {
    let actionSheet = this.actionsheetCtrl.create({
      title: '选择要进行的操作',
      cssClass: 'action-sheets-basic-page',
      buttons: [
        {
          text: '删除',
          role: 'destructive ',
          icon: !this.platform.is('ios') ? 'trash' : null,
          handler: () => {
            console.log('Delete clicked');
            alert("2131");
          }
        },
        {
          text: '分享',
          role: 'destructive ',
          icon: !this.platform.is('ios') ? 'share' : null,
          handler: () => {
            console.log('Share clicked');
          }
        },
        {
          text: '播放',
          role: 'destructive ',
          icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
          handler: () => {
            console.log('Play clicked');
          }
        },
        {
          text: '收藏',
          role: 'destructive ',
          icon: !this.platform.is('ios') ? 'heart-outline' : null,
          handler: () => {
            console.log('Favorite clicked');
          }
        },
        {
          text: '取消',
          role: 'cancel', // 取消操作总是会显示在菜单的最下发，和代码的位置无关。
          icon: !this.platform.is('ios') ? 'close' : null,
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }

关于操作按钮的图标，可以参照https://ionicframework.com/docs/ionicons/

button的[role]属性，值有两种：destructive和cancel。除取消操作外，其他操作都使用destructive属性值。如果使用cancel值，该操作会不显示。

handler()里是选择操作要进行的具体操作实现。