ionic3学习总结(一)

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.
动作表单是允许用户从一组选项中进行选择的对话框。它出现在应用的内容上方,用户必须手动排除,才能恢复与应用的交互。在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.
动作表单是由一组按钮创建的,每个按钮包含文本的属性,还可以选择处理程序和角色。如果处理程序返回false,那么操作表将不会被取消。动作表单也可以有一个标题、副标题和图标。

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.
按钮的角色属性可以是破坏性的,也可以是取消的。没有角色属性的按钮将具有平台的默认外观。具有cancel角色的按钮将始终作为底部按钮加载,无论它们在数组的哪个位置。所有其他按钮将按照添加到按钮数组的顺序显示。注意:我们建议破坏性按钮始终是数组中的第一个按钮,使它们成为顶部按钮。另外,如果动作表单通过点击背景而被删除,那么它将会从按钮中触发取消角色。

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().
您可以在创建方法: ActionSheet.create(opts) 的第一个参数中传递所有动作表单的选项。否则,操作表的实例具有添加选项的方法,如 setTitle()addButton()

方法属性介绍

创建方法: create(opts)
opts 是 ActionSheetOptions类型, 参数如下:

Option 类型 描述
title string 主标题
subTitle string 副标题
cssClass string 自定义样式的附加类,由空格分隔。
enableBackdropDismiss boolean 动作表单在用户点击背景时是否关闭。
buttons array<any> 要显示的一组按钮。

ActionSheet button options 如下:

Option 类型 描述
text string 按钮文本
icon icon 按钮图标
handler any 选中后的回调
cssClass string 自定义样式的附加类,由空格分隔
role string 按钮应该如何显示、destructivecancel。如果没有提供角色,它将显示没有任何附加样式的按钮。

实例如下:

import { ActionSheetController } from 'ionic-angular'

export class MyClass{

 constructor(public actionSheetCtrl: ActionSheetController) {}
 presentActionSheet() {
    const actionSheet = this.actionSheetCtrl.create({
      title: '更换头像',
//    subTitle: '附标题',
//    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被关闭之后,应用程序可能还需要根据处理程序的逻辑切换到另一个页面。然而,由于多个转换是在大约同一时间触发的,所以导航控制器很难清晰地将可能被异步启动的多个转换激活。对于action sheet来说,这意味着最好等待action sheet完成它的转换,然后在同一个nav控制器上开始新的转换。

在下面的示例中,单击按钮之后,它的handler将等待异步操作完成,然后使用pop返回上一个页面。潜在的问题是,在操作表完成转换之前,异步操作可能已经完成。在这种情况下,最好确保动作表单首先完成了它的转换,然后开始下一个转换。

let actionSheet = this.actionSheetCtrl.create({
  title: 'Hello',
  buttons: [{
    text: 'Ok',
    handler: () => {
      // 用户点击了表单按钮
      // action sheet 开始dimiss transition
      let navTransition = actionSheet.dismiss();

      // 开始执行异步方法
      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是非常关键的。当按钮被点击时action sheet会自动关闭。因为handler返回false,然后这个action sheet就不会被关掉,之后你就可以完全控制action sheet。

二.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容