ionic 面包屑导航

来源：互联网发布：阿里云临时域名不能用编辑：程序博客网时间：2024/06/17 19:51

1、bread-crumb.ts文件

在 ionic 中 NavController 是导航控制组件的基础类，在面包屑导航中将使用该对象实例的 length()、remove(startIndex, removeCount, opts)、push(page, params, opts)方法：

length(): 返回该导航控制器的视图数量。remove(startIndex, removeCount, opts)：从导航堆栈中的指定索引处移除 removeCount 个页面（该移除是移除索引后面页面，所以研移除多个页面要将该索引移动到 length()-removeCount 处）push(page, params, opts)：将页面压进当前导航堆栈顶部

源码：

import { Component, Input} from '@angular/core';import { NavController } from 'ionic-angular';@Component({  selector: 'bread-crumb',  templateUrl: 'bread-crumb.html',})export class BreadCrumb {  @Input() private nextPage; // 下一个页面  @Input() private curPageId;  // 当前页面ID  constructor(  public navCtrl: NavController) {}  /*  * 面包屑导航控制  */  navClick(event){    let dif = this.curPageId - event.target.id;     if( dif > 0 ){        this.navCtrl.remove(this.navCtrl.length() - dif, dif);     } else if (dif === -1 && this.nextPage){       this.navCtrl.push(this.nextPage);     }  }}

2、bread-crumb.html文件

<div class="nav-container" >  <span [ngClass]="{'curPage': curPageId === 1 }" class="center-y nav-control-1" id=1 (click)="navClick($event)">页面1</span>  <span [ngClass]="{'curPage': curPageId === 2 }" class="center-y nav-control-2" id=2 (click)="navClick($event)">页面2</span>  <span [ngClass]="{'curPage': curPageId === 3 }" class="center-y nav-control-3" id=3 (click)="navClick($event)">页面3</span>  <span [ngClass]="{'curPage': curPageId === 4 }" class="center-y nav-control-4" id=4 (click)="navClick($event)">页面4</span>  <span [ngClass]="{'curPage': curPageId === 5 }" class="center-y nav-control-5" id=5 (click)="navClick($event)">页面5</span></div>

3、bread-crumb.scss文件

.nav-container{  position: relative;  width: 100%;  min-height: 40px;  background: #ccc;}.nav-container > span {  position: absolute;  width: 20%;  min-height: 40px;  line-height: 40px;;}.nav-container > span{  z-index: 10;  color: #fff;  text-align: center;  font-size: 1.5rem;}.nav-control-1{  left: 0;}.nav-control-2{  left: 20%;}.nav-control-3{  left: 40%;}.nav-control-4{  left: 60%;}.nav-control-5{  left: 80%;}.curPage{  color: black !important;}

阅读全文

0 0