ionic 上拉菜单(ActionSheet)

Ionic 上拉菜单（Action Sheet）2025 年最新最全中文讲解

（就是那个从屏幕底部“嗖”一下弹上来的操作菜单，超好看！）

1. 一行代码调用（最快上手）

import { ActionSheetController } from '@ionic/angular';

constructor(private actionSheetCtrl: ActionSheetController) {}

async openMenu() {
  const actionSheet = await this.actionSheetCtrl.create({
    header: '选择操作',
    subHeader: '你可以在这里放副标题',
    backdropDismiss: true,        // 点击灰色背景是否关闭
    cssClass: 'my-action-sheet',  // 自定义样式类名
    buttons: [
      {
        text: '删除',
        role: 'destructive',      // 红色高亮（专门给删除用）
        icon: 'trash',
        handler: () => {
          console.log('删除 clicked');
          this.deleteItem();
        }
      },
      {
        text: '分享',
        icon: 'share-social',
        handler: () => {
          console.log('分享 clicked');
        }
      },
      {
        text: '收藏',
        icon: 'heart',
        handler: () => {
          console.log('收藏 clicked');
        }
      },
      {
        text: '取消',
        role: 'cancel',            // 灰色 + 加粗，系统推荐写法
        icon: 'close',
      }
    ]
  });

  await actionSheet.present();
}

页面调用：

<ion-button (click)="openMenu()">打开菜单</ion-button>

2. 所有按钮属性全表（直接抄）

属性	说明	常用值
text	按钮文字（必填）	‘删除’
icon	左侧图标（可选）	‘trash’、’camera’
role	特殊角色	‘destructive’（红）、’cancel’
handler	点击回调（返回 false 可阻止关闭）	() => { … }
cssClass	给单个按钮加样式	‘bold-text’
data	自定义数据	data: { id: 123 }

3. 超实用 5 个真实场景模板（直接复制）

场景1：长按图片操作（最常用）

{
  text: '保存图片',
  icon: 'download-outline',
  handler: () => this.saveImage()
},
{
  text: '识别图中二维码',
  icon: 'qr-code-outline',
  handler: () => this.scanQR()
},
{
  text: '投诉',
  icon: 'flag-outline',
  handler: () => this.report()
},
{ text: '取消', role: 'cancel' }

场景2：列表项操作

{
  text: '置顶',
  icon: 'arrow-up',
},
{
  text: '标记为未读',
  icon: 'mail-unread-outline',
},
{
  text: '删除会话',
  role: 'destructive',
  icon: 'trash',
},
{ text: '取消', role: 'cancel' }

场景3：带颜色的自定义按钮

/* src/theme/variables.scss 或页面 scss */
.my-action-sheet .red-btn {
  --color: #ff3b30;
  --color-hover: #ff3b30;
}

{
  text: '立即拨打',
  icon: 'call',
  cssClass: 'red-btn',
  handler: () => this.call()
}

4. 全局统一样式（推荐写在 global.scss）

// 让所有 ActionSheet 更大、更圆角
.action-sheet-group {
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden;
}

// 按钮更高一点
.action-sheet-button {
  height: 60px !important;
  font-size: 18px;
}

// 取消按钮更粗
.action-sheet-cancel {
  font-weight: 600 !important;
  height: 70px !important;
}

然后所有页面都自动生效！

5. React 版本（ionic-react）

import { useIonActionSheet } from '@ionic/react';

export const MyComponent: React.FC = () => {
  const [present] = useIonActionSheet();

  const open = () => {
    present({
      header: '更多操作',
      buttons: [
        { text: '删除', role: 'destructive', handler: () => console.log('删') },
        { text: '取消', role: 'cancel' }
      ]
    });
  };

  return <IonButton onClick={open}>打开</IonButton>;
};

6. 官方文档（中文）

https://ionicframework.com/docs/api/action-sheet

总结一句话

全世界最好看的底部上拉菜单就是 Ionic 的 ActionSheet
一行代码 + 几个按钮对象，iOS 是毛玻璃，Android 是圆角卡片，自动适配暗黑模式！

需要我立刻发你一个「2025 最新 Ionic 8 完整 ActionSheet 模板包」（包含 20 个常见场景 + 自定义动画 + 毛玻璃特效）吗？
直接回复「发我 ActionSheet 模板」就行～