javascript - 如何用 ion-slides 寻呼机功能替换 ionic2-super-tabs 工具栏

Question

美好的一天，

我目前正在为我的 ionic 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>

typescript

@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;
    }
  }
}