ionic5中actionSheet、toast、alert、loading等的使用

最新推荐文章于 2023-11-01 14:28:04 发布
最新推荐文章于 2023-11-01 14:28:04 发布
阅读量1k 收藏 1
点赞数
分类专栏： ionic5 前端 文章标签： typescript ionic5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010574271/article/details/116175310
版权

文章目录

上拉菜单actionSheet 的使用

ion-action-sheet的使用参考https://ionicframework.com/docs/api/action-sheet
在这里插入图片描述

新建页面

首先我们在项目中新建页面用于actionSheet 的使用

ionic g page actionsheet

在这里插入图片描述
在tab1中新建按钮跳转

<ion-button [routerLink]="['/actionsheet']">
 跳转到actionsheet页面
</ion-button>

新建按钮并添加点击事件

actionsheet.page.html

<ion-button (click)="showAction()">
   Click me
</ion-button>

ts中引入ActionSheetController并声明

actionsheet.page.ts：
在这里插入图片描述

定义showAction方法

actionsheet.page.ts：

async showAction() {
    const actionSheet = await this.actionSheetController.create({
      header: '我是actionsheet的标题',
      cssClass: 'my-custom-class',
      buttons: [{
        text: '删除',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: '分享',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: '收藏',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: '取消',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }

页面上点击后弹出如下：
在这里插入图片描述

不同平台显示效果

如果我们想所有平台使用ios形式的可以配置mode:“ios”
在这里插入图片描述
在这里插入图片描述
所有平台使用android形式的可以配置mode:“md”
在这里插入图片描述
在这里插入图片描述

Toast 提示框

Toast 的使用参考https://ionicframework.com/docs/api/toast
在这里插入图片描述

新建页面

首先我们在项目中新建页面用于toast 的使用

ionic g page toast

在这里插入图片描述
在tab1中新建按钮跳转

<ion-button [routerLink]="['/toast']">
      跳转到toast页面
 </ion-button>

新建按钮并添加点击事件

toast.page.html:

<ion-button (click)="presentToast()">
  presentToast
</ion-button>
<ion-button (click)="presentToastWithOptions()">
  presentToastWithOptions
</ion-button>

ts中引入ToastController 并声明

toast.page.ts：
在这里插入图片描述

ts中新建相应方法

toast.page.ts：

async presentToast() {
    const toast = await this.toastController.create({
      message: 'Your settings have been saved.',
      duration: 2000
    });
    toast.present();
  }

async presentToastWithOptions() {
  const toast = await this.toastController.create({
    header: 'Toast header',
    message: 'Click to Close',
    position: 'top',
    buttons: [
      {
        side: 'start',
        icon: 'star',
        text: 'Favorite',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Done',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }
    ]
  });
  await toast.present();

  const { role } = await toast.onDidDismiss();
  console.log('onDidDismiss resolved with role', role);
}

点击presentToast后：
在这里插入图片描述
点击presentToastWithOptions后：
在这里插入图片描述
presentToast中message表示弹出的文字信息、duration表示提示框显示事件，我们还可以用color来定义提示框的颜色
在这里插入图片描述
改造代码：
在这里插入图片描述
点击presentToast后
在这里插入图片描述
我们如果想要提示框居于界面中间并适应文字长度我们可以position定义文字在提示框的位置；cssClass定义提示框的其他内联样式在资料中显示如下：
在这里插入图片描述
在这里插入图片描述
ts中presentToast改造如下：
在这里插入图片描述
接下来，我们就需要定义全局的样式
theme/variables.scss：

//toast自定义css
.mytoast {
    width:200px;
    text-align:center;
    left:50%;
    margin-left:-100px;
}

点击presentToast后显示如下
在这里插入图片描述

loading加载样式

加载的使用参考资料https://ionicframework.com/docs/api/loading
在这里插入图片描述

新建页面

ionic g page loading

在这里插入图片描述
在tab1中新建按钮跳转

<ion-button [routerLink]="['/loading']">
  跳转到Loading页面
</ion-button>

新建按钮并添加点击事件

loading.page.html：

<ion-button (click)="presentLoading()">
    presentToast
  </ion-button>
  <ion-button (click)="presentLoadingWithOptions()">
    presentToastWithOptions
  </ion-button>

ts中引入loadingController并声明

loading.page.ts：
在这里插入图片描述

ts中新建相应方法


  async presentLoading() {
    const loading = await this.loadingController.create({
      cssClass: 'my-custom-class',
      message: '加载中',
      duration: 2000
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();//返回在加载终止时解析的承诺
    console.log('Loading dismissed!');
  }

  async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({
      //spinner: null,//是否显示圈圈
      duration: 5000,//延迟时间
      message: 'Click the backdrop to dismiss early...',
      translucent: true,//表示半透明的效果
      cssClass: 'custom-class custom-loading', //注意自定义样式要写在全局
      backdropDismiss: true //单击背景时，加载指示器将被取消
    });
    await loading.present();

    const { role, data } = await loading.onDidDismiss();
    console.log('Loading dismissed with role:', role);
  }

当点击presentLoading时显示如下：
在这里插入图片描述
且在加载消失后，打印日志如下
在这里插入图片描述
当点击presentLoadingWithOptions显示如下
在这里插入图片描述
加载结束时打印日志如下：
在这里插入图片描述

alert弹窗

关于弹窗的使用，我们可以参考https://ionicframework.com/docs/api/toast
在这里插入图片描述

新建页面

我们使用命令新建一个alert页面

ionic g page alert

在这里插入图片描述
然后在tab1中新建按钮跳转

<ion-button [routerLink]="['/alert']">
  跳转到alert页面
</ion-button>

官方文档中给出的弹窗的例子有很多，我们选取几个来讲讲

新建按钮并添加点击事件

<ion-button (click)="presentAlert()">
 presentAlert
</ion-button>
<ion-button (click)="presentAlertMultipleButtons()">
  presentAlertMultipleButtons
</ion-button>
<ion-button (click)="presentAlertConfirm()">
  presentAlertConfirm
</ion-button>
<ion-button (click)="presentAlertPrompt()">
  presentAlertPrompt
</ion-button>

ts中引入AlertController并声明

alert.page.ts：
在这里插入图片描述

ts中新建相应方法

presentAlert我们就定义一个普通提示信息的弹窗如下：

async presentAlert() {
  const alert = await this.alertController.create({
    cssClass: 'my-custom-class',
    header: '提示信息',
    subHeader: '我是一个提示信息',
    message: 'This is an alert message.',
    buttons: ['确定']
  });
  await alert.present();
  const { role } = await alert.onDidDismiss();
  console.log('onDidDismiss resolved with role', role);
}

点击presentAlert按钮后显示如下：
在这里插入图片描述
presentAlertMultipleButtons我们定义一个不光有提示信息，还有各种按钮如Cancel、Open Modal、Delete的弹窗，代码如下：

async presentAlertMultipleButtons() {
  const alert = await this.alertController.create({
    cssClass: 'my-custom-class',
    header: 'Alert',
    subHeader: 'Subtitle',
    message: 'This is an alert message.',
    buttons: ['Cancel', 'Open Modal', 'Delete']
  });
  await alert.present();
}

点击presentAlertMultipleButtons按钮后显示如下：
在这里插入图片描述
这些按钮需要由具体的功能，所有我们在presentAlertConfirm中定义弹窗有确定和取消两个按钮，点击确定执行具体的任务，点击取消任务取消弹窗消失：

async presentAlertConfirm() {
  const alert = await this.alertController.create({
    cssClass: 'my-custom-class',
    header: '提示信息!',
    message: '您确定要删除吗',
    buttons: [
      {
        text: '取消',
        role: 'cancel',
        cssClass: 'secondary',//注意自定义class写在全局
        handler: (blah) => {
          console.log('Confirm Cancel: blah');
        }
      }, {
        text: '确定',
        handler: () => {
          console.log('Confirm Okay');
        }
      }
    ]
  });
  await alert.present();
}

点击presentAlertConfirm后显示如下：
在这里插入图片描述
点击确定后日志如下：
在这里插入图片描述
点击取消日志如下：
在这里插入图片描述
还有一种最常用的弹窗，就是表单弹窗，代码如下：

//alert放表单
async presentAlertPrompt() {
  const alert = await this.alertController.create({
    cssClass: 'my-custom-class',
    header: 'Prompt!',
    inputs: [
      {
        name: 'name1',
        type: 'text',
        placeholder: 'Placeholder 1'
      },
      {
        name: 'name2',
        type: 'text',
        id: 'name2-id',
        value: 'hello',
        placeholder: 'Placeholder 2'
      },
      // multiline input.
      {
        name: 'paragraph',
        id: 'paragraph',
        type: 'textarea',
        placeholder: 'Placeholder 3'
      },
      {
        name: 'name3',
        value: 'http://ionicframework.com',
        type: 'url',
        placeholder: 'Favorite site ever'
      },
      // input date with min & max
      {
        name: 'name4',
        type: 'date',
        min: '2017-03-01',
        max: '2018-01-12'
      },
      // input date without min nor max
      {
        name: 'name5',
        type: 'date'
      },
      {
        name: 'name6',
        type: 'number',
        min: -5,
        max: 10
      },
      {
        name: 'name7',
        type: 'number'
      },
      {
        name: 'name8',
        type: 'password',
        placeholder: 'Advanced Attributes',
        cssClass: 'specialClass',
        attributes: {
          maxlength: 4,
          inputmode: 'decimal'
        }
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: () => {
          console.log('Confirm Cancel');
        }
      }, {
        text: 'Ok',
        handler: (result) => {//获取表单输入的值
          console.log(result);
        }
      }
    ]
  });
  await alert.present();
}

我们在最后OK的按钮上绑定了一个钩子，用于获取表单的数据，我们在页面上使用如下
点击presentAlertPrompt：
在这里插入图片描述
我们随便填入一些信息：
在这里插入图片描述

点击ok 后弹窗消失，并且日志打印我们表单的信息
在这里插入图片描述

alert和手势相关事件
ZYYzyy1993的博客
08-24 195
步骤 【准备工作】 1.ionicstartionic04alerttabs 2.新建页面 ionicgpageactionsheet ionicgpagealert ionicgpagetoast ionicgpageloading 3.tab1.page.html <ion-content[fullscreen]="true"> <ion-button[routerLin...
Ionic 集成 Toast 插件实例
05-30
已通过Ionic 创建的一个项目，并增加了一个Native插件：Toast，另外已添加了Android平台支持，通过Cordova打包可正常运行。另外录制了视频演示如何将这个ionic项目集成到Android现有项目，并用as打包，有需要请联系。
ionic ActionSheet(上拉菜单)
KingCruel的专栏
01-09 3068
1、$ionicActionSheet    ionic的上拉菜单由三种按钮组成，点击任何按钮都自动关闭上拉菜单;    取消按钮 - 取消按钮总是位于菜单的底部，用户点击该按钮将关闭。一个上拉菜单 最多有一个取消按钮。    危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个 危险选项按钮。    自定义按钮 - 用户定义的任意数量的按钮。 2、
Ionic Framework 5官方文档翻译
分享技术，传播知识!
03-20 1775
Ionic Framework 5官方文档翻译入门Ionic Framework 5特点Ionic Framework是什么？核心概念构建你的第一个应用先进的Web应用浏览器支持版本控制发布说明支持安装 入门 Ionic Framework 5特点 全新的UI组件和手势 全新的图标、颜色和主题 官方React与Angular集成 混合开发与原生开发 了解混合应用和原生应用之间的区别。我们打...
ionic之 ActionSheetController
yanyanforest的专栏
07-06 2566
在说明ActionSheetController的使用之前，先看看官方对ActionSheetController的解释。 官方地址：http://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/ 在项目引用库ionic.bundle.js 有这样的注释,如下： * @ngdoc method
$ionicActionSheet的学习
qq_28499043的博客
08-16 3048
我最近刚学到ionicActionSheet，记下我的笔记~
ionic学习记录总结
09-21
在开始使用Ionic之前，首先需要安装Node.js环境，然后通过npm（Node.js包管理器）来安装Cordova和Ionic。具体命令如下： ```bash npm install -g cordova ionic ``` **2. 创建项目：** 创建一个新的Ionic项目非常...
混合开发Ionic+angular快速开发App
qq_33703512的博客
06-21 6844
对于新入门的移动开发者而言，摆在面前的移动应用开发有三种口味 Native App： 本地应用程序（原生App） Web App：网页应用程序（移动web） Hybrid App：混合应用程序（混合App） Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、...
IONIC——实现版本更新功能
weixin_44686124的博客
06-01 367
1.安装插件 // 文件管理 $ ionic cordova plugin add cordova-plugin-file@6.0.1 $ npm install --save @ionic-native/file@4.18.0 // 文件上传 $ ionic cordova plugin add cordova-plugin-file-opener2@2.0.19 $ npm install --save @ionic-native/file-opener@4.7.0 $ ionic cordova
Ionic实战项目-跨平台App开发
热门推荐
含笑
04-28 1万+
功能技术分析 - 读取朋友圈消息状态 - 朋友列表可以列出朋友信息 - 用户中心请求API,实现用户登录。用户信息的读取功能 用户中心模块 - 用户登录状态判断 - 用户登录信息存储 - Ionic App 中处理API请求 APP周边资源 - 启动界面的快速生成技巧 - APP图表 - IOS平台打包发布 - IOS平台打包发布 - 极光推送模块的集
ActionSheetController is an UIAlertController's APIs like ActionSheet control.zip
10-10
ActionSheetController is an UIAlertController's APIs like ActionSheet control.zip,ActionSheetController is an UIAlertController's APIs like ActionSheet control
ionic官方文档
zjf_0812的博客
03-06 1374
ionic官方文档
ionic纯html，js实现toast提示框
huzhenv5的博客
08-19 1842
这种实现方法不会调用系统源生的控件，在开发时方便调试，性能上也没太大差别，以下直接上不集成步骤： 1，进入ionic工程根目录，安装ionic-toast库文件：bower install ionic-toast --save安装完后，会在ionic工程目录的lib文件夹下出现ionic-toast库文件： 2，在ionic工程的index.html页面中引入库文件：<link href="
ionic中的ToastController小弹窗用法。提示信息。toast长时间不消失解决方案
涂涂
07-27 9715
学习笔记：有理解有翻译 ToastController 1.Toast 是现代应用中常用的微妙通知。 它可用于提供有关操作的反馈或显示系统消息。 应用程式的内容会显示Toast ，应用程式可以将其关闭，以恢复使用者与应用程式的互动。 Creating-创建 所有的toast选项都应该在create方法的第一个参数中传递：create（opts）。 要显示的消息应在消息属性中传递。 show...
ionic2-Toast
weixin_33860722的博客
09-28 90
2019独角兽企业重金招聘Python工程师标准>>> ...
Ionic-------ActionSheetController（附完整代码及示例图)
最新发布
阿土不土的博客
11-01 209
ActionSheet是一个对话框，用户可以从一组选项中进行选择。它出现在应用程序内容板的顶部，用户必须手动关闭它，然后才能恢复与应用程序的交互。在ios模式下，危险（破坏性）选项变得显而易见。有一些简单的方法可以从动作表中取消，比如点击背景或按下桌面上的转义键。 它通常是以一组button的形式出现，代码如下：(在html要触发的地方调用该方法即可)
ionic中AlertController设置
涂涂
07-27 6301
AlertController 警报是一个对话框，向用户显示信息或使用输入收集用户的信息。 应用程式内容上方会显示快讯，使用者必须手动关闭快讯，才能恢复与应用程式的互动。 它还可以选择具有标题，子标题和消息。 可以在创建方法的第一个参数中传递所有警报的选项：create（opts）。 否则，警报的实例具有添加选项的方法，例如setTitle（）或addButton（）。 Alert Bu
ionic loading(加载动作)
KingCruel的专栏
01-24 2827
1、Html 腾讯新闻 弹出Loading窗口 弹出Loading窗口 {{stooge.name}} 2、Controller appCntrollers.controller('ManageLoadingCtrl', function ($scope, $timeout, $ionicLoading) {
ionic4-抽取公共方法Loading
幸遇三杯酒好，况逢一朵花新
01-06 3335
这里写自定义目录标题ionic4common ionic4   最近小咸儿一直在学习ionic4，因为项目的需要所以将Loading与Toast抽取成公共方法，以方便各个页面的调用。接下来看看具体的baseui.ts文件该如何创建： common   首先需要在src文件夹下创建一个common文件，小咸儿在里面创建了一个baseui.ts的文件，ionic4中的Loading方法和ionic3发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值