前提：此文章主要是针对ionic做web开发的，如微信公众号、浏览器里面的；
问题：
情况1 页面用懒加载：
子页面 -- 点击浏览器返回按钮 --》 根目录 路由正常，但tabs消失了
情况2 跟页面不用懒加载，子页面用懒加载：
子页面 -- 点击浏览器返回按钮 --》 根目录 路由正常，tabs存在，看似成功
子页面A -- 使用pop() --》 根目录 -- push() --》 子页面B -- 点击浏览器返回按钮 --》 子页面A 返回路由出错了，要再点多一次才能回到rootpage
情况3 页面不用懒加载：。。。。这个没试过，不用的话比较麻烦你们去试试吧
解决办法：自定义一个iontabs的组件代替原本的tabs；
思路：把组件放在根目录的page里面，传参切换状态；
上代码：
1、我们想把全部页面改为懒加载的模式
image.png
2、修改app.component.ts的进入页面
image.png
3、ionic g component iontabs
ts
import { NavController } from 'ionic-angular';
import { Component, Input } from '@angular/core';
@Component({
selector: 'iontabs',
templateUrl: 'iontabs.html'
})
export class IontabsComponent {
@Input() item // 获取切换页面的参数
tabs=[
{
name: '首页',
page:'HomePage',
in:'url(assets/imgs/tab1_in.svg)' , // 图标状态1
out:'url(assets/imgs/tab1_out.svg)' , // 图标状态2
},
{
name: '分类',
page: 'KindPage',
in: 'url(assets/imgs/tab2_in.svg)',
out: 'url(assets/imgs/tab2_out.svg)',
},
{
name: '我的',
page: 'MinePage',
in: 'url(assets/imgs/tab4_in.svg)',
out: 'url(assets/imgs/tab4_out.svg)', },
]
constructor(
public navCtrl:NavController,
) {
}
// 切换页面的方法，可回调
ctab(e,i){
this.navCtrl.setRoot(e).then(()=>{console.log(e); });
}
}
html
<ion-row class="bar">
<ion-col *ngFor="let tab of tabs,let i = index" text-center tappable (click)="ctab(tab.page)" [ngStyle]="{'color': item==i?'#29aff6':'#a2a6a8' }">
<div>
<span [ngStyle]="{'background-image': item==i?tab.in:tab.out }"></span>
</div>
{{tab.name}}
</ion-col>
</ion-row>
4、放在所需要的跟页面的ion-footer
image.png
image.png
image.png
注意序号是从0开始的。
结果：然后你的返回就不怕浏览器的按钮了。（样式你们自己来啦）
image.png
