Action Sheet 來源于ios系統(tǒng),從手機下邊 向上展示出一個可選擇的彈出窗口(類似于alert).也可以作為一個應用的 菜單進行導航。
The Action Sheet always appears above any other components on the page, and must be dismissed in order to interact with the underlying content. When it is triggered, the rest of the page darkens to give more focus to the Action Sheet options.
如同alert彈出 Action sheet啟動后總是在所有組件的最上邊處于活動狀態(tài),同時點擊Action Sheet以外的內(nèi)容 Action Sheet必須能夠消失。彈出后 sheet后面會有一個灰色的透明幕。
特別注意: 創(chuàng)建Action Sheet 必須在 局部變量中,不要在構(gòu)造函數(shù)中創(chuàng)建,賦值給實例變量。因為Action Sheet 創(chuàng)建后,被銷毀后整個 nativeElemet就銷毀了。相當于實例變量就指向的元素為空了。 就會報 Cannot read 使用方法:http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/import { ActionSheetController } from 'ionic-angular'export class MyClass{ constructor(public actionSheetCtrl: ActionSheetController) {} presentActionSheet() { let actionSheet = this.actionSheetCtrl.create({//也可通過 setTitle() or addButton()添加參數(shù) title: 'Modify your album', buttons: [ { text: 'Destructive', role: 'destructive',//兩個角色 destructive cancel ,cancel會一直在彈出框的最下邊,無論數(shù)組順序。點擊彈出的空白區(qū)域也會觸發(fā)cancel handler: () => { //handler中如果有 return false ,彈出就不會 消失 console.log('Destructive clicked'); } }, { text: 'Archive', handler: () => { let navTransition = actionSheet.dismiss(); //點擊button 多個操作例如跳轉(zhuǎn),手動銷毀彈出,然后等待銷毀后,再進行其它操作。 // 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; } }, { text: 'Cancel', role: 'cancel', handler: () => { console.log('Cancel clicked'); } } ] }); actionSheet.present(); }}
新聞熱點
疑難解答