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()里是选择操作要进行的具体操作实现。