Question

我尝试安装npm i -S @ ionic-super-tabs / angular，在Ionic 4中不起作用。请告诉我是否有任何方法

Answer 1

是的，有一种方法可以实现。

page.ts

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

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  @ViewChild('slider') slider: IonSlides;
  page = "0";

  selectedTab(index) {
    this.slider.slideTo(index);
  }

  async moveButton() {
    let index = await this.slider.getActiveIndex();
    this.page = index.toString();
    // console.log("0")
  }

  segmentChanged(ev: any) {
    // console.log('Segment changed', ev);
  }
}

page.html

  <ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Notifications</ion-title>
  </ion-toolbar>
  <ion-toolbar>
    <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="page">
      <ion-segment-button value="0" (click)="selectedTab(0)">
        <ion-label>All</ion-label>
      </ion-segment-button>
      <ion-segment-button value="1" (click)="selectedTab(1)">
        <ion-label>Mentions</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-slides #slider (ionSlideWillChange)="moveButton()">
    <ion-slide>
      <ion-label>All</ion-label>
    </ion-slide>
    <ion-slide>
      <ion-label>Mentions</ion-label>
    </ion-slide>
  </ion-slides>
</ion-content>

细分可作为可滑动标签使用，希望它对您有帮助：）

有什么方法可以将可滑动选项卡添加到现有的Ionic空白项目中？

1 个答案: