Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件

1、ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>actionsheet</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

    <ion-button (click)="showAction()">
      弹出actionSheet
    </ion-button>
</ion-content>
import { Component, OnInit } from ‘@angular/core‘;

import { ActionSheetController } from ‘@ionic/angular‘;

@Component({
  selector: ‘app-actionsheet‘,
  templateUrl: ‘./actionsheet.page.html‘,
  styleUrls: [‘./actionsheet.page.scss‘],
})
export class ActionsheetPage implements OnInit {

  constructor(public actionSheetController: ActionSheetController) {}

  ngOnInit() {
  }

  async showAction(){

    const actionSheet = await this.actionSheetController.create({
      header: ‘我是actionsheet的标题‘,
      mode:‘ios‘,   /*修改action的平台*/
      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: ‘取消‘,
        role: ‘cancel‘,
        handler: () => {
          console.log(‘Cancel clicked‘);
        }
      }]
    });
    await actionSheet.present();

  }

}

2、Alert 官方文档:https://ionicframework.com/docs/api/alert

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>alert</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
   <ion-button (click)="presentAlert()">
    presentAlert
   </ion-button>
   <ion-button (click)="presentAlertMultipleButtons()">
       确定要删除吗
   </ion-button>
   <ion-button (click)="presentAlertPrompt()">
     alert放表单
  </ion-button>
</ion-content>
import { Component, OnInit } from ‘@angular/core‘;

import { AlertController } from ‘@ionic/angular‘;

@Component({
  selector: ‘app-alert‘,
  templateUrl: ‘./alert.page.html‘,
  styleUrls: [‘./alert.page.scss‘],
})
export class AlertPage implements OnInit {

  constructor(public alertController: AlertController) {}

  ngOnInit() {
  }

  async presentAlert() {
    const alert = await this.alertController.create({
      header: ‘提示信息‘,
      message: ‘你已经支付成功了...‘,
      buttons: [‘确认‘]
    });

    await alert.present();
  }

  async presentAlertMultipleButtons() {
    const alert = await this.alertController.create({
      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();
  }

  async presentAlertPrompt() {
    const alert = await this.alertController.create({
      header: ‘Prompt!‘,
      inputs: [
        {
          name: ‘name1‘,
          type: ‘text‘,
          placeholder: ‘Placeholder 1‘
        },
        {
          name: ‘name2‘,
          type: ‘text‘,
          id: ‘name2-id‘,
          value: ‘hello‘,
          placeholder: ‘Placeholder 2‘
        },
        {
          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‘
        }
      ],
      buttons: [
        {
          text: ‘Cancel‘,
          role: ‘cancel‘,
          cssClass: ‘secondary‘,
          handler: () => {
            console.log(‘Confirm Cancel‘);
          }
        }, {
          text: ‘Ok‘,
          handler: (result) => {    //获取表单输入的值
            console.log(result);
          }
        }
      ]
    });

    await alert.present();
  }

}

3、Toast 官方文档:https://ionicframework.com/docs/api/toast

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>toast</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

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

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

</ion-content>
import { Component, OnInit } from ‘@angular/core‘;

import { ToastController } from ‘@ionic/angular‘;
@Component({
  selector: ‘app-toast‘,
  templateUrl: ‘./toast.page.html‘,
  styleUrls: [‘./toast.page.scss‘],
})
export class ToastPage implements OnInit {
  constructor(public toastController: ToastController) {}
  ngOnInit() {
  }

  async presentToast() {
    const toast = await this.toastController.create({
      message: ‘登录成功‘,
      duration: 2000,
      position: ‘middle‘,
      color:‘dark‘,
      cssClass:‘mytoast‘    /*cssClass必须写在全局*/
    });
    toast.present();
  }

  async presentToastWithOptions() {
    const toast = await this.toastController.create({
      message: ‘Click to Close‘,
      showCloseButton: true,
      position: ‘top‘,
      closeButtonText: ‘Done‘
    });
    toast.present();
  }

}

4、Loading 官方文档:https://ionicframework.com/docs/api/loading

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>loading</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

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

    <ion-button (click)="presentLoadingWithOptions()">
      presentLoadingWithOptions
    </ion-button>
</ion-content>
import { Component, OnInit } from ‘@angular/core‘;

import { LoadingController } from ‘@ionic/angular‘;

@Component({
  selector: ‘app-loading‘,
  templateUrl: ‘./loading.page.html‘,
  styleUrls: [‘./loading.page.scss‘],
})
export class LoadingPage implements OnInit {
  constructor(public loadingController: LoadingController) {}

  ngOnInit() {
  }

  async presentLoading() {
    const loading = await this.loadingController.create({
      message: ‘加载中...‘,
      duration: 5000
    });
    await loading.present();

    //事件
    await loading.onDidDismiss();
    // console.log({ role, data });
    console.log(‘Loading dismissed!‘);
  }

  async presentLoadingWithOptions() {
    const loading = await this.loadingController.create({
      // spinner: null,
      duration: 5000,   //延迟时间
      message: ‘请等待...‘,
      translucent: true,  //半透明的
      cssClass: ‘custom-class custom-loading‘   //注意自定义样式要写在全局
    });
    return await loading.present();
  }

}

5、Ionic4 手势相关事件

详情参考:http://www.ionic.wang/article-index-id-155.html 1、首先需要安装 hammerjs

ionic4 中的 gestures 手势事件包括: tap, press, pan, swipe, rotate, and pinch events 等。详细使用方法参考:

详情参考:http://www.ionic.wang/article-index-id-155.html

1、首先需要安装 hammerjs

npm install hammerjs --save

2、在项目的 src/main.ts 中引入 hammerjs

import ‘hammerjs‘;

3、在项目中使用

<ion-button (press)="doPress()">
长按触发的事件
</ion-button>
<ion-button (tap)="doTap()">
点击触发的事件
</ion-button>

说明:如果未来的 ionic4.x 版本可以直接使用手势事件的话忽略上面的安装引入过程。

<ion-header>
  <ion-toolbar>
    <ion-title>gestures</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-button (tap)="doTap()">
    点击事件
  </ion-button>

  <ion-button (press)="doPress()">
    长按事件
  </ion-button>

  <ion-list>
    <ion-item>
      <ion-label  (press)="doPress()">衣服</ion-label>
    </ion-item>
    <ion-item>
      <ion-label  (press)="doPress()">鞋子</ion-label>
    </ion-item>

    <ion-item>
      <ion-label  (press)="doPress()">女装</ion-label>
    </ion-item>
  </ion-list>
</ion-content>
import { Component, OnInit } from ‘@angular/core‘;

import { AlertController } from ‘@ionic/angular‘;
@Component({
  selector: ‘app-gestures‘,
  templateUrl: ‘./gestures.page.html‘,
  styleUrls: [‘./gestures.page.scss‘],
})
export class GesturesPage implements OnInit {

  constructor(public alertController: AlertController) {}

  ngOnInit() {
  }
  doTap(){

    console.log(‘tap tap ...‘)
  }

  async doPress(){
    const alert = await this.alertController.create({

      backdropDismiss:false,
      header: ‘提示‘,
      message: ‘确定要删除吗!‘,
      buttons: [
        {
          text: ‘取消‘,
          role: ‘cancel‘,
          cssClass: ‘secondary‘,
          handler: (blah) => {
            console.log(‘Confirm Cancel: blah‘);
          }
        }, {
          text: ‘确定‘,
          handler: () => {
            console.log(‘Confirm Okay‘);
          }
        }
      ]
    });
    await alert.present();

  }
}

原文地址：https://www.cnblogs.com/loaderman/p/10972307.html

时间： 2024-10-09 15:57:14

Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件的相关文章

Bootstrap Modal 框 alert confirm loading

/** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div class="modal fade" tabindex="-1" role="dialog"><div class="modal-dialog modal-sm" role="document" s

Javascript --扩展String实现替换字符串中index处字符

String.prototype.replaceCharAt = function(n,c){ return this.substr(0, n)+ c + this.substr(n+1,this.length-1-n); } Javascript --扩展String实现替换字符串中index处字符

（转）深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head&g

vue中alert toast confirm loading 公用

import Vue from 'vue' import { ToastPlugin, AlertPlugin, ConfirmPlugin, LoadingPlugin } from 'vux' /*import { Promise } from 'es6-promise';*/ Vue.use(ToastPlugin) Vue.use(AlertPlugin) Vue.use(ConfirmPlugin) Vue.use(LoadingPlugin) const Message = {};

JavaScript 和 jQuery $.alert alert $.confirm confirm 的对比

JavaScript 和 jQuery  弹窗对比 javascript 的三种弹框对象隶属于window对象,并且都会阻塞当前事件和脚本,直到用户操作完成才会继续执行后续事件和脚本.不能使用html元素. jQuery(jquery-confirm插件) jQuery的弹出窗口是通过html元素和一些js事件模拟出来的,隶属于document对象,而且不能够阻塞其他的事件和脚本执行. 例: jQuery 脚本 脚本1: var $confirm= $.confirm('是否继续?');  //

Nginx 的 Javascript 扩展

去年 Nginx 发布了 nginScript,一个基于 Nginx 的 JavaScript 执行环境 可以通过 nginScript 扩展自己的 Nginx 服务器的能力 Nginx 非常强大,通过各种指令可以定义出复杂的配置,但有时可能无法很好的满足我们的需求,毕竟 Nginx 团队和第三方社区开发的模块是有限的 可以自己开发 C 模块,但有一定门槛(腾云科技ty300.com),Nginx 希望为大家提供更加方便的扩展方式,便推出了 nginScript nginScript 包含2部分

VS2010 好用的javascript扩展工具

工具1) JScript Editor Extensions 折叠代码 下载地址: JScript Editor Extensions 工具2) Javascript parser 以树形方式查的代码定义与定位  下载地址:Javascript parser 菜单位置: 视图\其他窗口\Javascript Parser

【笔记】javascript扩展内建对象举例

一.在php中有一个叫做in_array()的函数,主要用于查询数组中是否存在某个特定的值. javascript中则没有一个叫做inArray()的方法.因此,通过Array.prototype来实现一个这样的功能: Array.prototype.inArray = function(needle){ for(var i = 0,len = this.length; i < len; i++){ if(this[i] === needle){ return true; } } return

JavaScript中的alert()与console.log()的区别

1.alert() [1.1]有阻塞作用,不点击确定,后续代码无法继续执行 [1.2]alert()只能输出string,如果alert输出的是对象会自动调用toString()方法 e.g. alert([1,2,3]);//'1,2,3' [1.3]alert不支持多个参数的写法,只能输出第一个值 e.g. alert(1,2,3);//1 2.console.log() [2.1]在打印台输出 [2.2]可以打印任何类型的数据 e.g. console.log([1,2,3]);//[1,