xml地图|网站地图|网站标签 [设为首页] [加入收藏]

介绍的拓展,Ionic实现自定义返回按键事件

来源:http://www.ccidsi.com 作者:集成经验 人气:124 发布时间:2019-05-08
摘要:在 Android 和 Window平台下,有时候我们须求监听重返按钮的轩然大波来进展对应的操作,也便是自定义再次回到按钮事件。上边依照三个例子来说课怎样在ionic 中自定义重回按钮事件。

在 Android 和 Window 平台下,有时候我们须求监听重返按钮的轩然大波来进展对应的操作,也便是自定义再次回到按钮事件。上边依照三个例子来说课怎样在 ionic 中自定义重回按钮事件。

GIF.gif

总计属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

效益须求

首先看下要经过自定义重回开关事件来兑现的必要(均在点击再次来到键操作之后):

  • 假设键盘展开,则藏身键盘;
  • 万1彰显 ionic 的 Loading 组件(在呼吁数据的时候),则隐藏 Loading 组件;
  • 只要当前页面是子页面,则赶回上个页面;若是是根页面,则提示用户是或不是退出应用。
1.使用Cli 命令ionic generate component FilterMaterial

注意:
1、ionic对component,page等敏感 ,所以命名最佳不要含有那个
贰、注意这篇著作和自定义component的区别
3、新建component时会自动在app.module.ts里导入,请手动删除

对比methods:

<p>Reversed message: "{{ reversedMessage() }}"</p>

// in component
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

今非昔比的是计算属性是根据它们的信赖性举办缓存的。总计属性只有在它的相关注重产生变动时才会重新求值。那就代表假诺 message 还未曾爆发更改,多次访问 reversedMessage 总括属性会立刻重临此前的持筹握算结果,而不要再次实施函数。

相比来说,只要发生再度渲染,method 调用总会施行该函数。

切切实实达成

率先表达下,本示例的 ionic 应用的构造是 tabs 结构。

  1. tabs.html 中的 ion-tabs 定义外号,如 mainTabs
<ion-tabs #mainTabs selectedIndex="1">
    <ion-tab [root]="tab1Root" tabTitle="页面1"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="页面2"></ion-tab>
</ion-tabs>

ion-tabs 定义别称的目标是方便人民群众通过代码找到 ion-tabs 的实例。

  1. app.component.ts 中实行落到实处代码编写(实现细节在疏解中):
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, Keyboard, IonicApp, NavController, Tabs, ToastController, Toast } from 'ionic-angular';

@Component({
    templateUrl: 'app.html'
})
export class AppComponent {
    @ViewChild(Nav) nav: Nav; // ion-nav 引用
    backButtonPressed: boolean = false;  // 用于判断返回键是否触发

    constructor(public platform: Platform,
                public ionicApp: IonicApp,
                public toastCtrl: ToastController,
                public keyboard: Keyboard) {

        // 等待平台加载完成之后注册返回按键事件
        this.platform.ready().then(() => {
            this.registerBackButtonAction(); // 注册返回按键事件
        });
    }

    /**
     * 注册返回按键事件
     */
    registerBackButtonAction() {

        // 使用 registerBackButtonAction 方法进行自定义事件处理程序
        this.platform.registerBackButtonAction(() => {

            // 如果键盘开启则隐藏键盘。实现要点:使用 ionic-plugin-keyboard 插件进行键盘的控制
            if (this.keyboard.isOpen()) {
                this.keyboard.close();
                return;
            }

            // 隐藏加载动画。实现要点:通过 this.ionicApp._loadingPortal 获取到代表 Loading 的 OverlayPortal,然后获取当前被激活的 ViewController
            const activePortal: any = this.ionicApp._loadingPortal.getActive();
            if (activePortal) { // 如果有被激活的 ViewController 则将其隐藏。
                activePortal.dismiss();
                activePortal.onDidDismiss();
                return;
            }

            // 根据当前导航进行不同的处理( mainTabs 对象是在 TabsPage 定义的 ion-tabs )
            // 通过 this.nav.getActive().instance.mainTabs 获取到别名为 mainTabs 的 ion-tabs
            const mainTabs: Tabs = this.nav.getActive().instance.mainTabs;
            if (mainTabs) {

                // 获取到当前被选中的 ion-tab
                const mainNav: NavController = mainTabs.getSelected();

                // 如果 ion-tab 能返回则返回上一个页面,不能就直接退出应用
                mainNav.canGoBack() ? mainNav.pop() : this.showExit();
            } else {

                // 如果 ion-nav 能返回则返回上一个页面,不能就直接退出应用
                this.nav.canGoBack() ? this.nav.pop() : this.showExit();
            }
            return;
        }, 1);
    }

    /**
     * 双击退出提示框
     */
    showExit() {
        if (this.backButtonPressed) { // 当触发标志为 true 时,即2秒内双击返回按键则退出APP
            this.platform.exitApp();
        } else {
            const currentToast: Toast = this.toastCtrl.create({
                message: '再按一次退出应用',
                duration: 2000,
                position: 'top'
            });
            currentToast.present().then(() => {
                this.backButtonPressed = true;

                // 2秒内没有再次点击返回则将触发标志标记为false
                const id: any = setTimeout(() => {
                    clearTimeout(id);
                    this.backButtonPressed = false;
                }, 2000);
            });
        }
    }
}
2.使用

由于是供PopoverController使用的弹出组件,不是常说的自定义指令,所以,在ts中添加
import {IonicPage, NavController, NavParams, PopoverController} from 'ionic-angular';
@Component前加上@IonicPage(),如下

Paste_Image.png

ts中式点心击事件措施:

Paste_Image.png

this.viewCtrl.dismiss(this.selectedMItem,sItem)措施对应上面包车型客车onDidDismiss方法

module.ts代码如下

Paste_Image.png