ionic3學(xué)習(xí)總結(jié)(一)

1.ActionSheetController

官方文檔如下(本人使用有道翻譯)

An Action Sheet is a dialog that lets the user choose from a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Dangerous (destructive) options are made obvious in ios mode. There are easy ways to cancel out of the action sheet, such as tapping the backdrop or hitting the escape key on desktop.
動作表單是允許用戶從一組選項中進(jìn)行選擇的對話框。它出現(xiàn)在應(yīng)用的內(nèi)容上方,用戶必須手動排除,才能恢復(fù)與應(yīng)用的交互。在ios模式下,危險(destructive)選項變得比較顯眼。有一些簡單的方法可以取消動作表單,比如點擊背景或者點擊桌面的退出鍵。

An action sheet is created from an array of buttons, with each button including properties for its text, and optionally a handler and role. If a handler returns false then the action sheet will not be dismissed. An action sheet can also optionally have a title, subTitle and an icon.
動作表單是由一組按鈕創(chuàng)建的,每個按鈕包含文本的屬性,還可以選擇處理程序和角色。如果處理程序返回false,那么操作表將不會被取消。動作表單也可以有一個標(biāo)題、副標(biāo)題和圖標(biāo)。

A button's role property can either be destructive or cancel. Buttons without a role property will have the default look for the platform. Buttons with the cancel role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the buttons array. Note: We recommend that destructive buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
按鈕的角色屬性可以是破壞性的,也可以是取消的。沒有角色屬性的按鈕將具有平臺的默認(rèn)外觀。具有cancel角色的按鈕將始終作為底部按鈕加載,無論它們在數(shù)組的哪個位置。所有其他按鈕將按照添加到按鈕數(shù)組的順序顯示。注意:我們建議破壞性按鈕始終是數(shù)組中的第一個按鈕,使它們成為頂部按鈕。另外,如果動作表單通過點擊背景而被刪除,那么它將會從按鈕中觸發(fā)取消角色。

You can pass all of the action sheet's options in the first argument of the create method: ActionSheet.create(opts). Otherwise the action sheet's instance has methods to add options, like setTitle() or addButton().
您可以在創(chuàng)建方法: ActionSheet.create(opts) 的第一個參數(shù)中傳遞所有動作表單的選項。否則,操作表的實例具有添加選項的方法,如 setTitle()addButton()。

方法屬性介紹

創(chuàng)建方法: create(opts)
opts 是 ActionSheetOptions類型, 參數(shù)如下:

Option 類型 描述
title string 主標(biāo)題
subTitle string 副標(biāo)題
cssClass string 自定義樣式的附加類,由空格分隔。
enableBackdropDismiss boolean 動作表單在用戶點擊背景時是否關(guān)閉。
buttons array<any> 要顯示的一組按鈕。

ActionSheet button options 如下:

Option 類型 描述
text string 按鈕文本
icon icon 按鈕圖標(biāo)
handler any 選中后的回調(diào)
cssClass string 自定義樣式的附加類,由空格分隔
role string 按鈕應(yīng)該如何顯示、destructivecancel。如果沒有提供角色,它將顯示沒有任何附加樣式的按鈕。

實例如下:

import { ActionSheetController } from 'ionic-angular'

export class MyClass{

 constructor(public actionSheetCtrl: ActionSheetController) {}
 presentActionSheet() {
    const actionSheet = this.actionSheetCtrl.create({
      title: '更換頭像',
//    subTitle: '附標(biāo)題',
//    cssClass: 'headChoice',
//    enableBackdropDismiss:false,
      buttons: [
        {
          text: '拍照',
          icon: 'logo-instagram',
          role: 'destructive',
          handler: () => {
            console.log('Destructive clicked');
          }
        },{
          text: '從相冊選擇',
          icon: 'ios-images',
          handler: () => {
            console.log('Archive clicked');
          }
        },{
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }
}
ActionSheetController
Dismissing And Async Navigation

在一個action sheet被關(guān)閉之后,應(yīng)用程序可能還需要根據(jù)處理程序的邏輯切換到另一個頁面。然而,由于多個轉(zhuǎn)換是在大約同一時間觸發(fā)的,所以導(dǎo)航控制器很難清晰地將可能被異步啟動的多個轉(zhuǎn)換激活。對于action sheet來說,這意味著最好等待action sheet完成它的轉(zhuǎn)換,然后在同一個nav控制器上開始新的轉(zhuǎn)換。

在下面的示例中,單擊按鈕之后,它的handler將等待異步操作完成,然后使用pop返回上一個頁面。潛在的問題是,在操作表完成轉(zhuǎn)換之前,異步操作可能已經(jīng)完成。在這種情況下,最好確保動作表單首先完成了它的轉(zhuǎn)換,然后開始下一個轉(zhuǎn)換。

let actionSheet = this.actionSheetCtrl.create({
  title: 'Hello',
  buttons: [{
    text: 'Ok',
    handler: () => {
      // 用戶點擊了表單按鈕
      // action sheet 開始dimiss transition
      let navTransition = actionSheet.dismiss();

      // 開始執(zhí)行異步方法
      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;
    }
  }]
});

actionSheet.present();

這個handler返回false是非常關(guān)鍵的。當(dāng)按鈕被點擊時action sheet會自動關(guān)閉。因為handler返回false,然后這個action sheet就不會被關(guān)掉,之后你就可以完全控制action sheet。

二.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容