Ionic 上拉菜单概述

Ionic框架中的上拉菜单（Action Sheet）是一种从屏幕底部弹出的交互式菜单，常用于提供多个操作选项。它适用于移动端应用，能够在不占用过多屏幕空间的情况下展示用户可执行的命令。

安装与基本配置

确保项目已安装Ionic和Angular环境。若未安装，可通过以下命令初始化项目：

npm install -g @ionic/cli
ionic start myApp tabs --type=angular

在需要使用上拉菜单的页面或组件中，导入ActionSheetController：

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

创建基础上拉菜单

在组件类中注入ActionSheetController并定义方法触发菜单：

constructor(private actionSheetCtrl: ActionSheetController) {}

async presentActionSheet() {
  const actionSheet = await this.actionSheetCtrl.create({
    header: '操作选项',
    buttons: [
      {
        text: '删除',
        role: 'destructive',
        handler: () => console.log('删除操作')
      },
      {
        text: '分享',
        handler: () => console.log('分享操作')
      },
      {
        text: '取消',
        role: 'cancel'
      }
    ]
  });
  await actionSheet.present();
}

自定义按钮与样式

通过cssClass属性可添加自定义样式类：

const actionSheet = await this.actionSheetCtrl.create({
  cssClass: 'custom-action-sheet',
  buttons: [
    {
      text: '保存',
      icon: 'save-outline',
      handler: () => console.log('保存操作')
    }
  ]
});

在全局或组件样式中定义样式：

.custom-action-sheet {
  --button-color: #3880ff;
  --icon-font-size: 20px;
}

动态生成菜单选项

根据业务逻辑动态生成按钮数组：

getDynamicButtons() {
  const buttons = [
    { text: '默认操作', handler: () => {} }
  ];
  if (this.user.isAdmin) {
    buttons.unshift({ text: '管理员操作', role: 'admin' });
  }
  return buttons;
}

处理异步操作

在按钮处理器中支持异步操作：

{
  text: '加载数据',
  handler: async () => {
    const data = await this.loadData();
    console.log(data);
  }
}

多级菜单实现

通过嵌套调用实现多级菜单交互：

async presentNestedMenu() {
  const firstLevel = await this.actionSheetCtrl.create({
    buttons: [
      {
        text: '更多选项',
        handler: () => this.presentSecondLevelMenu()
      }
    ]
  });
  await firstLevel.present();
}

async presentSecondLevelMenu() {
  const secondLevel = await this.actionSheetCtrl.create({
    buttons: [
      { text: '子选项1', handler: () => {} }
    ]
  });
  await secondLevel.present();
}

国际化和可访问性

结合Ionic的国际化工具实现多语言支持：

{
  text: this.translate.instant('DELETE'),
  role: 'destructive'
}

添加ARIA属性提升可访问性：

const actionSheet = await this.actionSheetCtrl.create({
  ariaLabel: '操作菜单',
  buttons: [
    { 
      text: '关闭', 
      ariaRole: 'closebutton' 
    }
  ]
});

测试与调试技巧

使用Jasmine进行单元测试：

it('should create action sheet', async () => {
  spyOn(actionSheetCtrl, 'create').and.callThrough();
  await component.presentActionSheet();
  expect(actionSheetCtrl.create).toHaveBeenCalled();
});

通过浏览器开发者工具检查生成的DOM结构，确保样式和事件绑定正确。