ionic新增tbas页面

新建页面

ionic g page tabs

ionic新增tbas页面

删除路由

在src\app\app-routing.module.ts下将tab4路由删除
ionic新增tbas页面

在tabs下配置tabs4的路由

src\app\tabs\tabs-routing.module.ts:
ionic新增tbas页面

新建tabs4的切换按钮

在tabs页面中新建tabs4的切换按钮
src\app\tabs\tabs.page.html:
ionic新增tbas页面
打开页面,我们可以看到新的tabs4页面如下:
ionic新增tbas页面
如果想要更换图标,可以去网站:https://ionicons.com/寻找
ionic新增tbas页面
ionic新增tbas页面
想要何种图标只需将图标名称复制到组件中即可
ionic新增tbas页面
可以看到,tabs4的图标变成了我们想要的图标
ionic新增tbas页面

上一篇:ionic HTML5 移动应用框架 v4.3.0


下一篇:ionic5混合app开发环境配置以及项目和调试apk生成