[英]How can I replace ionic2-super-tabs Toolbar with ion-slides pager function
Good day, 美好的一天,
I'm currently using the following plugin for my ionic 3 project: https://github.com/zyra/ionic2-super-tabs 我目前正在为ionic 3项目使用以下插件: https : //github.com/zyra/ionic2-super-tabs
This plugin offers a nice feature for swipeable tabs in Ionic apps. 该插件为Ionic应用程序中的可滑动选项卡提供了一个不错的功能。 Within the documentation it shows how to hide the toolbar (which I've successfully managed to do).
在文档中,它显示了如何隐藏工具栏(我已经成功地做到了)。 Now I want to be able to replace the toolbar with an
ion-slides
type feature like the pager
to show the user that they can swipe left or right to access the other pages or rather in this case, tabs. 现在,我希望能够使用诸如
pager
类的ion-slides
类型的功能替换工具栏,以向用户显示他们可以向左或向右滑动以访问其他页面,或者在这种情况下为选项卡。
Here is my current code: 这是我当前的代码:
home.ts 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 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 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) {
}
}
And this is the feature I would like to have to show navigation: 这是我要显示导航的功能:
You can add a custom element in the page that contains the <super-tabs>
element. 您可以在包含
<super-tabs>
元素的页面中添加自定义元素。
Here's a quick example, modify as needed, keep in mind I didn't test this: 这是一个简单的示例,请根据需要进行修改,请记住,我没有对此进行测试:
HTML 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 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;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.