Ionic中使用Segment组件实现顶部滑动菜单栏

在很多现代的APP中，我们都可以看到页面顶部的滑动菜单，比如今日头条，就是像下面这样的：

比如知乎，是像下面这样的：

这种滑动菜单栏占用面积很小，对于一个想要更多展示内容的页面来说，是一个很好的选择。它的特点是当我们滑动页面的时候，上面的菜单会跟着滑动，而且对应的菜单会被选中，高亮和居中。当我们滑动或者点选顶部的菜单栏的时候，下面的页面也会跟着进行切换。

接下来就用世界的demo来讲解在Ionic中怎样实现这一功能。

我是在我的Tab2页面里面写的demo，下面是html代码：

<ion-header>
  <ion-toolbar color="primary">
    <ion-segment scrollable mode="md" (ionChange)="onSegmentChange($event)" [(ngModel)]="segmentSelected">
      <ion-segment-button value="0" id="segment-0">
        <ion-icon name="call"></ion-icon>
        <ion-label>Call</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1" id="segment-1">
        <ion-icon name="cloud-upload"></ion-icon>
        <ion-label>Publish</ion-label>
      </ion-segment-button>
      <ion-segment-button value="2" id="segment-2">
        <ion-icon name="document-text"></ion-icon>
        <ion-label>Topic</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3" id="segment-3">
        <ion-icon name="code-working"></ion-icon>
        <ion-label>Query</ion-label>
      </ion-segment-button>
      <ion-segment-button value="4" id="segment-4">
        <ion-icon name="open"></ion-icon>
        <ion-label>Open</ion-label>
      </ion-segment-button>
      <ion-segment-button value="5" id="segment-5">
        <ion-icon name="search"></ion-icon>
        <ion-label>Search</ion-label>
      </ion-segment-button>
      <ion-segment-button value="6" id="segment-6">
        <ion-icon name="create"></ion-icon>
        <ion-label>Write</ion-label>
      </ion-segment-button>
      <ion-segment-button value="7" id="segment-7">
        <ion-icon name="book"></ion-icon>
        <ion-label>Read</ion-label>
      </ion-segment-button>
      <ion-segment-button value="8" id="segment-8">
        <ion-icon name="trash"></ion-icon>
        <ion-label>Trash</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides #slides [options]="slideOptions" (ionSlideDidChange)="onSlideDidChange(slides)" (ionSlidesDidLoad)="onSlideDidChange(slides)">
    <ion-slide class="slide-1">
      Call
    </ion-slide>
    <ion-slide class="slide-2">
      Publish
    </ion-slide>
    <ion-slide class="slide-3">
      Topic
    </ion-slide>
    <ion-slide class="slide-1">
      Query
    </ion-slide>
    <ion-slide class="slide-2">
      Open
    </ion-slide>
    <ion-slide class="slide-3">
      Search
    </ion-slide>
    <ion-slide class="slide-1">
      Write
    </ion-slide>
    <ion-slide class="slide-2">
      Read
    </ion-slide>
    <ion-slide class="slide-3">
      Trash
    </ion-slide>
  </ion-slides>
</ion-content>

下面是ts代码：

import { Component, OnInit } from '@angular/core';
import { IonSlides } from '@ionic/angular';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit{
  public segmentSelected: any;
  public selectedSlide: any;
  slideOptions = {
    initialSlide: 0,
    slidesPerView: 1,
    speed: 400
  };
  constructor() {}

  ngOnInit() {
    this.segmentSelected = 0;
  }

  async onSegmentChange(event: any) {
    // console.log(this.segmentSelected);
    await this.selectedSlide.slideTo(this.segmentSelected);
  }

  async onSlideDidChange(slides: IonSlides) {
    this.selectedSlide = slides;
    slides.getActiveIndex().then(selectedIndex => {
      this.segmentSelected = selectedIndex;
      document.getElementById('segment-' + selectedIndex).scrollIntoView({
        behavior: 'smooth',
        block: 'center',
        inline: 'center'
      });
    });
  }
}

下面是scss代码：

ion-segment-button {
    min-width: 70px;
  }
  
ion-slides, ion-slide {
    height: 100%;
    font-size: 48px !important;
}

.slide-1 {
    background: #e0bbe4;
}

.slide-2 {
    background: #957dad;
    color: #fff;
}

.slide-3 {
    background: #ffdfd3;
}

现在你只需要把这些代码拷贝到你的项目就可以实现如下效果：

https://www.bilibili.com/video/BV1uk4y1y7cb/

赶紧试一试吧，如果有什么问题，或者你有更好的解决方案，请务必立即与我联系。

这只是初级版本，还没有涉及到请求服务端数据，后面慢慢加上。