场景

Ionic介绍以及搭建环境、新建和运行项目：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166

在上面搭建起Ionic项目后

怎样新建页面并进行页面之间的跳转。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

Ionic创建页面

cd到项目目录

ionic g page 页面名称

比如新建一个新闻news页面

ionic g page news

新建页面后会在app-routing.moudule.ts中自动添加路由

ionic在页面之间跳转

前面已经新建了news页面，那么在tab1中怎样跳转到news页面

首先在tab1.page.html中新增一个button,然后设置其router-link为上面新建的news页面

  <ion-button [routerLink]="['/news']" expand="block" fill="clear" shape="round">Click me</ion-button>

tab1.page.html完整代码

<ion-header [translucent]="true"><ion-toolbar><ion-title>Tab 1</ion-title></ion-toolbar>
</ion-header><ion-content [fullscreen]="true"><ion-button [routerLink]="['/news']" expand="block" fill="clear" shape="round">Click me</ion-button>
</ion-content>

然后来到news.page.html,添加一个返回按钮

    <ion-buttons slot="start"><ion-back-button defaultHref="/tabs/tab1"></ion-back-button></ion-buttons>

news.page.html完整代码

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

效果

Ionic新增底部页面

创建tab4页面模块

ionic g page tab4

修改根目录里app-routing.module.ts 文件里面的路由配置，去掉默认增加的路由

tabs.router.module.ts 中新增路由

      {path: 'tab4',loadChildren: () => import('../tab4/tab4.module').then(m => m.Tab4PageModule)}

tabs.page.html 中新增底部tab 切换按钮

<ion-tabs><ion-tab-bar slot="bottom"><ion-tab-button tab="tab1"><ion-icon name="triangle"></ion-icon><ion-label>Tab 1</ion-label></ion-tab-button><ion-tab-button tab="tab2"><ion-icon name="ellipse"></ion-icon><ion-label>Tab 2</ion-label></ion-tab-button><ion-tab-button tab="tab3"><ion-icon name="square"></ion-icon><ion-label>Tab 3</ion-label></ion-tab-button><ion-tab-button tab="tab4"><ion-icon name="square"></ion-icon><ion-label>Tab 4</ion-label></ion-tab-button></ion-tab-bar></ion-tabs>

运行项目看效果

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面相关推荐

【小程序】当前“页面B”动态更改title，点击返回按钮，更改的标题会显示在“来源页面A”...
最近在做小程序的时候遇到这么一个有趣的问题,就是从A页面跳转到B页面,如果B页面需要在接口加载之后更改title, 并且如果接口请求过慢,还灭有请求完毕时就点击返回按钮回到A页面,这时B页面的请求会继 ...
h5页点击返回时关闭_在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口...
最近在使用微信.支付宝.百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息.当在错误页面的时候,点击返回或者Android物理按键上一步的时候,将关闭页面. 在微信.支付宝 ...
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
在微信.支付宝.百度钱包实现点击返回按钮关闭当前页面和窗口的方法,传统的window.close()是无效的,必须要使用它们的js代码才能关闭. 最近在使用微信.支付宝.百度钱包实现网页支付,对支付成 ...
uniapp APP开发监听顶部返回按钮到指定页面
目录 1.使用原生顶部导航栏 2.使用自定义顶部导航栏 1.使用原生顶部导航栏 onBackPress 监听页面返回,返回 event = {from:backbutton. navigateBack ...
微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动
前言底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
UNI-APP，设置某个页面横屏后，恢复竖屏，返回再次进入其他页面时，页面内容放大错乱
实现横竖屏方法: portrait-primary: 竖屏正方向: portrait-secondary: 竖屏反方向,屏幕正方向按顺时针旋转180°: landscape-primary: 横屏正方 ...
微信小程序顶部去除默认样式后依旧显示返回按钮和顶部页面名称
微信小程序顶部白边变透明后依旧显示返回按钮和顶部标题名称 ⭕️ 实现效果: 正文 1⃣️ 官方并没有提供相关的api 2⃣️ 本文实现的效果能响应式的适配任何机型(安卓苹果通用) 3⃣️ 先得去ico ...
用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
文章目录前言一.页面的简单实现 1.登录页面 2.注册页面 3.主页(显示个人信息) 二.逻辑实现 1.localStorage的使用 2.功能实现登录注册主页路由配置文件总结前言本 ...
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口
最近在使用微信.支付宝.百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息.当在错误页面的时候,点击返回或者Android物理按键上一步的时候,将关闭页面. 在微信.支付宝 ...

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面

场景

实现

Ionic创建页面

ionic在页面之间跳转

效果

Ionic新增底部页面

Ionic创建页面以及页面之间跳转、页面添加返回按钮、新增底部页面相关推荐

最新文章

热门文章