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

[复制链接]
ddt999 发表于 2019-3-15 13:30:34 | 显示全部楼层 |阅读模式
来源:https://www.jianshu.com/p/c97d6548e9bf
若内容不全,可点击上述链接查看来源网页,在网页中点击红色双层向下的箭头阅读全文


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

ts

import{NavController}from'ionic-angular';import{Component,Input}from'@angular/core';@Component({selector:'iontabs',templateUrl:'iontabs.html'})exportclassIontabsComponent{@Input()item//获取切换页面的参数tabs=[{name:'首页',page:'HomePage',in:'url(assets/imgs/tab1_in.svg)',//图标状态1out:'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(publicnavCtrl:NavController,){}//切换页面的方法,可回调ctab(e,i){this.navCtrl.setRoot(e).then(()=>{console.log(e);});}}

html

<ion-rowclass="bar"><ion-col*ngFor="lettaboftabs,leti=index"text-centertappable(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.pngimage.pngimage.png

注意序号是从0开始的。

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

image.png