如何使用ion-slides分页器功能替换ionic2-super-tabs工具栏

Question

美好的一天，

我目前正在为我的离子3项目使用以下插件：https://github.com/zyra/ionic2-super-tabs

此插件为Ionic应用程序中的可滑动标签提供了一个很好的功能。在文档中，它显示了如何隐藏工具栏（我已成功设法完成）。现在，我希望能够使用ion-slides类型的pager类型功能替换工具栏，以向用户显示他们可以向左或向右滑动以访问其他页面，或者更确切地说，在这种情况下，选项卡。

这是我目前的代码：

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { SuperTabsController } from 'ionic2-super-tabs';

import { TabsPage } from '../tabs/tabs';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private superTabsCtrl: SuperTabsController) {

  }

  welcomePage() {
    this.navCtrl.push(TabsPage,{index: "1"})
  }

  ionViewWillLeave() {
    this.superTabsCtrl.showToolbar(false);
}

}

tabs.ts

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { MyPage } from '../my/my';
import { WelcomePage } from '../welcome/welcome';
import { SettingsPage } from '../settings/settings';

@Component({
  templateUrl: 'tabs.html',
})
export class TabsPage {

  index = this.navParams.get('index')
  tab1Root = SettingsPage;
  tab2Root = WelcomePage;
  tab3Root = MyPage;

  constructor(public navParams: NavParams) {

    }


}

tabs.html

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

import { MyPage } from '../my/my';
import { WelcomePage } from '../welcome/welcome';
import { SettingsPage } from '../settings/settings';

@Component({
  templateUrl: 'tabs.html',
})
export class TabsPage {

  index = this.navParams.get('index')
  tab1Root = SettingsPage;
  tab2Root = WelcomePage;
  tab3Root = MyPage;

  constructor(public navParams: NavParams) {

    }


}

这是我想要显示导航的功能：

Answer 1

您可以在包含<super-tabs>元素的页面中添加自定义元素。

这是一个快速示例，根据需要进行修改，请记住我没有测试过这个：

<强> HTML

  <super-tabs (tabSelect)="onTabSelect($event)" ...>
    ...
  </super-tabs>
  <div class="pager">
    <span class="pager-dot" [class.selected]="selectedTabIndex === 0"></span>
    <span class="pager-dot" [class.selected]="selectedTabIndex === 1"></span>
    <span class="pager-dot" [class.selected]="selectedTabIndex === 2"></span>
  </div>

<强>打字稿

@Component( ... )
export class MyPage {
  // set it to the default selected tab
  selectedTabIndex: number = 0;
  onTabSelect(ev: any) {
    // forgot what this event passes, but I think the "ev" object has an "index" property
     this.selectedTabIndex = ev.index;
  }
}

<强> SCSS

.pager {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  height: 15px;
  span.pager-dot {
    display: inline-block; // so we can set height + width to a span element
    width: 10px;
    height: 10px;
    border-radius: 500rem; // make it round
    transition: all .3s linear; // make size transition smooth

    &.selected {
      width: 15px;
      height: 15px;
    }
  }
}