ionic3 导航栏返回按钮事件设置

最新推荐文章于 2021-01-28 12:01:25 发布
最新推荐文章于 2021-01-28 12:01:25 发布
阅读量9k 收藏 5
点赞数
分类专栏： angular（4+） ionic3 文章标签： ionic3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34438958/article/details/77742665
版权

ionic3 导航栏返回按钮事件设置

export class Page {
    @ViewChild(Navbar) navBar: Navbar; ①

    ionViewDidLoad() { ②
        this.navBar.backButtonClick = this.backButtonClick; ③
    }

    backButtonClick = (e: UIEvent) => {
        // do something
        this.navCtrl.pop();
    }
 }

①： 直接获取navBar 子组件
②： 在初始化方法中为backbutton 设置事件
③： 给this.navBar.backButtonClick 赋值

hxc_
关注
专栏目录
ionic中导航栏讲解
lzyisaking的博客
02-19 951
一、导航视图 : ion-nav-view 这个视图用于在公共页面声明用于显示子页面的详情。 二、模板视图 : ion-view 尽管在模板视图中可以随便写 HTML，但是，在 ionic 中，我们总是使用指令  ion- -w view 来 作 为模板视图内容的容器，这是为了与 ionic 的导航框架保持兼容： ion- -w view  指
ionic3监听并修改手机物理返回键和自带导航回退解决方案
04-27
ionic监听手机物理返回键及ionic自带回退导航优化，比如子页面按手机返回键返回，弹出框时返回，子页面回退多层操作
ionic3隐藏子页面的tabs和配置返回按钮
农码精神
09-05 164
ionic3隐藏子页面的tabs和配置返回按钮 在app.modlues.ts文件中修改 imports: [ BrowserModule, IonicModule.forRoot(MyApp, { tabsHideOnSubPages: 'true', //隐藏子页面的tabs bac...
ionic 事件
青
11-25 1925
//禁止侧滑后退事件 $ionicConfigProvider.views.swipeBackEnabled(false);
ionic 处理页面导航条返回事件，返回指定页面
翱翔的魁魁
05-26 3322
ionic：返回上一页面的方法 this.navCtrl.pop(); ionic：返回指定页面的方法： // 第一步：导入ViewChild 和 Navbar import { Component,ViewChild } from '@angular/core'; import { IonicPage, NavController, NavParams,Navbar } fro...
IONIC按真机上的返回键时，关闭所有的弹窗
QQ_852213985
09-15 1437
       在IONIC的开发过程中，我们经常遇到这样的情况：当你在手机上，弹出了一个提示，如 退出登录登录？ yes / no，但这个时候，你不点击yes，也不点击no，你点击手机的返回时，这个弹框仍然还存在，直到退出这个应用时，这个弹框才关闭掉！        针对以上问题，下面是解决方法    app.component.ts页面 import { Component, Vie...
关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
08-31
例如，你可以使用`$ionicConfigProvider.views.maxCache()`来控制视图缓存的数量，或者使用`$ionicConfigProvider.backButton.text()`和`$ionicConfigProvider.backButton.icon()`来自定义返回按钮的文本和图标。...
Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面示例代码.zip
05-26
在本文中，我们将深入探讨如何使用Ionic框架创建页面、实现页面间的跳转，以及如何在页面上添加返回按钮和创建底部导航栏。Ionic是一个流行的开源框架，它基于Angular，用于构建跨平台的移动应用和 Progressive Web ...
angular4+ionic3编辑返回按钮自定义事件
海北军
01-23 755
<ion-header> <ion-navbar no-border-bottom class="backBtn"> <ion-title class="backTitle"> 预约理论课费用 </ion-title> </ion-navbar> &
ionic中返回上一页
weixin_33721427的博客
11-17 176
.controller('NewsCtrl', ["$scope", "$ionicHistory", "$http","$timeout", "newssever", $scope.goback=function(){ $ionicHistory.goBack();} 通过$ionicHistory.goBack(); 模板： <button class="button but...
ionic 返回上一页，并刷新父页面
沉睡的博客
02-11 311
ionic 返回上一页，并刷新父页面 使用Angular中EventEmitter事件驱动实现不同页面通讯 Ionic4中内置的生命周期函数：ionViewDidLeave — 在页面离开后触发 ionic创建命令：ionic g service services/event 1.首先我们需要创建一个service，命令如下 ionic g service services/even...
【ionic4】解决页面刷新返回按钮消失的问题（ion-back-button）
李光 未来科技
06-12 3719
前言： 在用ionic开发的时候，一开始，肯定会走很多弯路，它的ion-back-button就是一个问题，页面一刷新，它的返回按钮就会消失！ 接下来，是解决此问题的解决方案！ 用ion-back-button实现返回上一个界面，对应的返回箭头会消失 <ion-title>button</ion-title> <ion-buttons slot="st...
ionic回退上一个页面方法
kaka_qwerty的博客
10-14 502
使用ionic时跳转通常使用router，但是使用router回退页面时上一页的数据会丢失，最终发现使用NavController可解决问题,代码如下: import {NavController} from '@ionic/angular'; export class DemoPage implements OnInit { constructor(private navCtrl: NavController) { } back() { this.navCtrl.back()
ionic3 带数据返回上一页
weixin_30596735的博客
09-07 339
确认订单添加地址功能 进入确认订单页面 点击添加地址，进入地址列表页面 点击地址列表返回确认订单页面，带回所选地址 具体实现： 确认订单添加地址代码如下 <ion-list> <ion-item (click)="goAddress()" *ngIf="addressFlag == false"> <i...
ionic4 返回上一页并刷新
weixin_43749669的博客
01-28 406
场景再现: 1.任务类表页面(父页面) 2.任务详情页面(子页面) 问题: 在子页面对数据进行了修改,然后返回到 父页面, 数据没有实时更新! 1.新建立一个服务services ionic g service services/event 2.安装配置EventEmitter: npm install--save eventemitter3 3.定义公共的服务配置 import { Injectable } from '@angular/core'; import {EventEmitter} fro
【转】ionic2 返回按钮
diejiankuai3444的博客
09-18 99
首先可以在 app.module.ts 文件中配置。 @NgModule 中的 imports 属性的IonicModule.forRoot 第二个参数，如下： IonicModule.forRoot(MyApp, { backButtonText: '', // 配置返回按钮的文字 backButtonIcon: 'arrow-dropleft-circle...
angluar1+ionic详情页返回在原来的位置（缓存数据和页面高度）
weixin_30302609的博客
04-22 307
因为是老项目，近期开发遇到了个需求就是从详情页按返回按钮要求返回到原来列表的页面位置，刚开始准备用的cache:true,但是存在大大的问题就是新增和编辑后返回数据都不是最新的，无法重新刷新页面reload方法失效了，那肯定是不过关的（如果没有新增和编辑的列表页可以考虑用），想了想改成了强制刷新parent.location.reload,在：$rootScope.$on（'$sta...
设置NavigationBar导航栏中返回按钮(BackBarButtonItem)和BarButtonItem文字
静影沉璧
10-20 8177
1. 后退按钮BackBarButtonItem的title设置想要导航栏中后退按钮(带箭头，BackBarButtonItem)和BarButtonItem的文字，折腾了一会，试了几种方法都不奏效，最终找到了个解决办法。 如果APP通过navigationController从A视图跳转至B视图，导航的返回按钮的加载原理是这样的： 1、如果B视图有一个自定义的左侧按钮（leftBarBu
ionic2 返回按钮
zf_hacjox的博客
04-17 7451
在 ionic2 的开发中，经常会遇到与返回按钮相关的操作，本篇介绍了如何全局配置返回按钮的文字与图标，以及如何使用自定义的按钮作为返回按钮，以及隐藏特定页面的返回按钮。
AngularJS ionic手势事件详解与示例
"AngularJS ionic手势事件的使用总结" 在AngularJS与ionic框架结合开发移动应用时，手势事件是一个非常关键的特性，它允许开发者通过用户的触摸操作来执行特定的功能。本文主要聚焦于AngularJS中的ionic手势事件，...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值