typescript Ionic - 类别的水平滚动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45157896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic - Horizontal scroll tab for Categories
提问by Missak Boyajian
I am working on a web/mobile application with mobile and we have this horizontal scroll tab at the above that represents Categories. On mobile it is fine, but on web I am required to add 2 flashes one on the right side and one on the left side. When the user clicks on them the scroll should move to that direction.
我正在开发一个带有移动设备的网络/移动应用程序，我们在上面有一个代表类别的水平滚动选项卡。在移动设备上它很好，但在网络上我需要添加 2 个闪光灯，一个在右侧，一个在左侧。当用户点击它们时，滚动应该移动到那个方向。
<ion-scroll scrollX="true">
<ion-segment [(ngModel)]="SelectedSubCategory">
<ion-segment-button value="" (ionSelect)="SelectSubCategory('')">
<h6>
All Groups
</h6>
</ion-segment-button>
<ion-segment-button value="{{item.CategoryId}}" (ionSelect)="SelectSubCategory(item.CategoryId)" *ngFor="let item of SubCategories">
<h6 class="subcategorytext">
{{item.CategoryName}}
</h6>
</ion-segment-button>
</ion-segment>
</ion-scroll>
Is it possible to achieve that?
有可能实现吗？
回答by sebaferreras
Event though this questions may be considered as a duplicate of another question, I'll still add this answer because I think there's a better way to handle the categories (at least, from the UI/UX point of view).
尽管这个问题可能被认为是另一个问题的重复，但我仍然会添加这个答案，因为我认为有更好的方法来处理类别（至少，从 UI/UX 的角度来看）。
The end result would look like this:
最终结果如下所示：
Basically, we're using the Ionic slider component to show the categories, but showing up to 3 categories per slide.
基本上，我们使用 Ionic 滑块组件来显示类别，但每张幻灯片最多显示 3 个类别。
View:
看法：
In the view we just need to add a toolbar with a row, that will include 3 columns inside: one for the left arrow, another one for the slider, and the last one for the right arrow. Please also notice that we're setting the slidesPerView="3"property in the ion-slideselement.
在视图中，我们只需要添加一个带有一行的工具栏，其中将包含 3 列：一列用于向左箭头，另一列用于滑块，最后一列用于向右箭头。另请注意，我们正在元素中设置slidesPerView="3"属性ion-slides。
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>App Name</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-row class="filters">
<ion-col class="col-with-arrow" (click)="slidePrev()" no-padding col-1>
<ion-icon *ngIf="showLeftButton" name="arrow-back"></ion-icon>
</ion-col>
<ion-col no-padding col-10>
<ion-slides (ionSlideDidChange)="slideChanged()" slidesPerView="3">
<ion-slide (click)="filterData(category.id)" *ngFor="let category of categories">
<p [class.selected]="selectedCategory?.id === category.id">{{ category.name }}</p>
</ion-slide>
</ion-slides>
</ion-col>
<ion-col class="col-with-arrow" (click)="slideNext()" no-padding col-1>
<ion-icon *ngIf="showRightButton" name="arrow-forward"></ion-icon>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-header>
Component code:
组件代码：
Then we just need to handle what to do when any category is selected, or when the current slide changes:
然后我们只需要处理选择任何类别时，或者当前幻灯片发生变化时要做什么：
// Angular
import { Component, Injector, ViewChild } from '@angular/core';
// Ionic
import { IonicPage, Slides } from 'ionic-angular';
// Models
import { CategoryModel } from './../../models/category.model';
@Component({ ... })
export class HomePage {
@ViewChild(Slides) slides: Slides;
public selectedCategory: CategoryModel;
public categories: Array<CategoryModel>;
public showLeftButton: boolean;
public showRightButton: boolean;
constructor(public injector: Injector) { ... }
// ...
private initializeCategories(): void {
// Select it by defaut
this.selectedCategory = this.categories[0];
// Check which arrows should be shown
this.showLeftButton = false;
this.showRightButton = this.categories.length > 3;
}
public filterData(categoryId: number): void {
// Handle what to do when a category is selected
}
// Method executed when the slides are changed
public slideChanged(): void {
let currentIndex = this.slides.getActiveIndex();
this.showLeftButton = currentIndex !== 0;
this.showRightButton = currentIndex !== Math.ceil(this.slides.length() / 3);
}
// Method that shows the next slide
public slideNext(): void {
this.slides.slideNext();
}
// Method that shows the previous slide
public slidePrev(): void {
this.slides.slidePrev();
}
}
Styles:
款式：
.filters {
ion-col {
text-align: center;
font-size: 1.6rem;
line-height: 1.6rem;
ion-icon {
color: #ccc;
}
&.col-with-arrow {
display: flex;
justify-content: center;
align-items: center;
}
}
p {
color: #fff;
margin: 0;
font-size: 1.6rem;
line-height: 1.6rem;
}
.selected {
font-weight: 700;
}
}
