【技巧】ionic自定义底部tabs（ionic开发web时浏览器返回键有问题）

前提：此文章主要是针对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

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

注意序号是从0开始的。

结果：然后你的返回就不怕浏览器的按钮了。（样式你们自己来啦）

image.png

【技巧】ionic自定义底部tabs（ionic开发web时浏览器返回键有问题）

推荐阅读更多精彩内容