路由之间的跳转后ionic提供的返回按钮<ion-nav-back-button>消失不出现的解决办法

最新推荐文章于 2019-06-12 16:41:18 发布
最新推荐文章于 2019-06-12 16:41:18 发布
阅读量1.1k 收藏
点赞数
分类专栏： ionic 文章标签： ionic 路由 back返回按钮不显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jason_xuhao/article/details/52934993
版权

在你跳转到的路由页面的controller里面加上一个加载前执行的事件

$scope.$on('$ionicView.beforeEnter', function (event, viewData) {//加载前执行
  viewData.enableBack = true;//强制显示back button
});

或者直接另外自己写返回按钮，利用$ionicHistory.goBack(-1)进行返回操作

我的乱码人生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于ionic路由跳转中back button 不出现的问题
Sheldon-谢东的博客
09-14 3702
github论坛上有人给出答案： The back button does not display because when you go into a tab, it enter's it own "history", meaning each tab has its own navigation back and forward. 因此，无论是从tabs中跳出，还是
ionic4学习笔记（二）-- 创建页面，ion-back-button属性
盼盼盼的博客
08-05 1764
1.创建user页面 ionic g page user ionic提供了用命令生成界面的功能： 在命令行输入ionic g 如下： PS D:\item\ionic-test> ionic g ? What would you like to generate? (Use arrow keys) page component service module class directive...
【ionic4】解决页面刷新返回按钮消失的问题（ion-back-button）
李光 未来科技
06-12 3706
前言： 在用ionic开发的时候，一开始，肯定会走很多弯路，它的ion-back-button就是一个问题，页面一刷新，它的返回按钮就会消失！ 接下来，是解决此问题的解决方案！ 用ion-back-button实现返回上一个界面，对应的返回箭头会消失 <ion-title>button</ion-title> <ion-buttons slot="st...
关于ionic中ios系统无法去掉<ion-nav-back-button>返回键自带的返回back字
我的乱码人生(分享与查询)
10-26 701
1.可以通过在config配置文件中添加配置，注意注入$ionicConfigProvider $ionicConfigProvider.platform.ios.backButton.previousTitleText(false).icon('ion-ios-arrow-back');//ioc返回按键的icon和标题 $ionicConfigProvider.platform.andr
ionic配合ion-nav-bar的导航右侧按钮指令
07-07
ionic1 嵌套路由，用ion-nav-bar和ion-view来实现页面回退，导致不能个性化的设置导航右侧按钮，这个指令基于angular1实现个性化定制右侧按钮，
ngx-ionic-image-viewer：一个Ionic 4 Angular组件，用于查看和缩放图像和照片，而无需任何其他依赖项
01-30
演示版|总览先决条件离子> = 4.0.0 角度> = 8.0.0安装npm install --save ngx-ionic-image-viewer用法进口导入模块并将其添加到主AppModule的“导入”部分中： import { NgxIonicImageViewerModule } from 'ngx-...
Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面示例代码.zip
05-26
<ion-back-button defaultHref="home"></ion-back-button> </ion-buttons> <ion-title>页面标题</ion-title> </ion-toolbar> </ion-header> ``` `defaultHref`属性指定了点击返回按钮时应导航到的页面。 4....
ionic组件ion-tabs选项卡切换效果实例
09-01
<ion-nav-view name="tab-home"></ion-nav-view> </ion-tab> ... </ion-tabs> ``` 在上面的代码示例中，`ion-nav-view`被用来渲染与每个选项卡关联的模板。每个`ion-nav-view`都需要一个唯一的`name`属性，以便...
ion-tree-list:用于显示嵌套列表项的离子指令
05-01
您需要添加ion-tree-list作为对Ionic应用程序的依赖项： angular.module('starter', [ 'ionic', 'controllers', 'services', 'ion-tree-list' ]) 在你的controller.js ： $scope.tasks = [ { name: 'fi
ionicSlideboxExample:Ionic Frameworks 的 ion-slide-box AngularJS 指令示例
07-04
在本文中，我们将深入探讨Ionic Framework中的`ion-slide-box`指令，这是一个强大的组件，用于创建滑动内容区域，常用于创建轮播、教程或产品展示等。`ion-slide-box`是基于AngularJS的一个指令，它使得在移动应用中...
Ionic实现页面下拉刷新(ion-refresher）功能代码
09-02
<ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item> </ion-list> </ion-content> ``` 这里的`pulling-text`属性定义了下拉时显示的提示文字，`on-refresh`则指定了下拉时调用的函数，即`...
ionic-ion-ios-buttons:带有 CSS 的简单 iOS 7 样式圆形按钮
07-11
离子 iOS 圆形按钮离子使用 CSS 创建简单的 iOS 样式圆形按钮。 这些是不太正方形的正方形。用法要使用，只需创建一个按钮并使用button-ios-rounded ： < button class =" button-ios-rounded " ></ button...
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档： : :megaphone: 支持/问题？ 有关常规支持...
ionic-escpos-bluetooth-printer-sample:蓝牙escpos热敏打印机使用ionic 3的样本
05-15
离子逸出蓝牙打印机样本 使用插件在蓝牙esc / pos热敏打印机上使用ionic 3的示例仅在android设备上测试如何使用安装ionic 3.x 分叉此回购使用命令行转到存储库所在的文件夹，然后运行npm install来安装依赖项在repo...
ionic中的ToastController小弹窗用法。提示信息。toast长时间不消失解决方案
涂涂
07-27 9515
学习笔记：有理解有翻译 ToastController 1.Toast 是现代应用中常用的微妙通知。 它可用于提供有关操作的反馈或显示系统消息。 应用程式的内容会显示Toast ，应用程式可以将其关闭，以恢复使用者与应用程式的互动。 Creating-创建 所有的toast选项都应该在create方法的第一个参数中传递：create（opts）。 要显示的消息应在消息属性中传递。 show...
ionic back 返回按钮不正常显示&&二级路由点击返回按钮失效无法返回到上一级页面的问题
小红红的博客
12-07 4797
用inoic写单页面应用，有一个默认的返回按钮，可是点击到二级界面返回按钮却不出现，或者出现之后点击back按钮没有反应，不返回到上一级页面，是因为在index.html 中定义按钮，二级页面和一级页面不是同一个中，不能共享历史记录，导致返回上一级界面失效。这样我们需要在HTML文件中写以下代码： 但是， 不要写里面的back button  返回按钮， 要去每个需要返回按钮的htm
ionic侧边栏 ion-side-menus 以及 ion-tap结合侧边 栏详解
最新发布
05-30
Ionic侧边栏是一个非常实用的组件，可以让用户轻松地在不同的页面之间进行导航。ion-side-menus是Ionic中用于创建侧边栏的指令，它提供了多个选项来控制侧边栏的外观和功能。 要使用ion-side-menus指令，需要在HTML中创建一个包含ion-side-menus指令的容器元素。然后，在容器中定义一个ion-side-menu-content指令，用于指定主要内容区域。在主要内容区域中，可以使用ion-nav-view指令来显示不同的页面。 在侧边栏中，可以使用ion-side-menu指令来定义侧边栏的内容。可以在侧边栏中包含任意数量的元素，包括列表、按钮和链接等。 当用户在侧边栏中选择一个项目时，可以使用ion-tap指令来处理点击事件。ion-tap指令可以与ng-click指令一起使用，用于在视图中触发特定的函数或操作。 下面是一个示例代码，展示了如何使用ion-side-menus和ion-tap指令来创建一个具有侧边栏导航的Ionic应用： ``` <ion-side-menus> <!-- 左侧侧边栏 --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">菜单</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-click="openPage('home')">首页</ion-item> <ion-item ng-click="openPage('about')">关于</ion-item> <ion-item ng-click="openPage('contact')">联系我们</ion-item> </ion-list> </ion-content> </ion-side-menu> <!-- 主要内容区域 --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <button class="button button-icon ion-navicon" ng-click="toggleLeft()"> </button> <h1 class="title">我的应用</h1> </ion-header-bar> <ion-nav-view></ion-nav-view> </ion-side-menu-content> </ion-side-menus> ``` 在上面的代码中，我们创建了一个包含ion-side-menus指令的容器元素。在容器中，我们定义了一个包含ion-side-menu指令的左侧侧边栏，并在其中添加了一些项目。在主要内容区域中，我们使用ion-nav-view指令来显示不同的页面，并使用ion-header-bar指令来添加导航栏。在导航栏中，我们添加了一个按钮，用于打开左侧侧边栏，并使用ion-tap指令来处理点击事件。 最后，我们还需要在控制器中定义一个openPage函数，用于在点击侧边栏中的项目时导航到不同的页面。 ``` .controller('MyCtrl', function($scope, $ionicSideMenuDelegate, $state) { $scope.openPage = function(page) { $ionicSideMenuDelegate.toggleLeft(false); $state.go(page); }; $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }); ``` 在上面的代码中，我们定义了一个openPage函数，用于在点击侧边栏中的项目时导航到不同的页面。我们还定义了一个toggleLeft函数，用于打开或关闭左侧侧边栏。在openPage函数中，我们通过$state.go函数来导航到不同的页面，并在导航完成后关闭左侧侧边栏。在toggleLeft函数中，我们使用$ionicSideMenuDelegate.toggleLeft函数来打开或关闭左侧侧边栏。 总之，使用ion-side-menus和ion-tap指令可以轻松创建具有侧边栏导航的Ionic应用，并实现侧边栏中项目的点击事件处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值