Ionic - 类别的水平滚动选项卡[重复]

Posted 2023-03-13

【中文标题】Ionic - 类别的水平滚动选项卡[重复]

【英文标题】：Ionic - Horizontal scroll tab for Categories [duplicate]

【发布时间】：2017-12-22 19:07:57

【问题描述】：

我正在开发一个带有移动设备的网络/移动应用程序，我们在上面有这个代表类别的水平滚动选项卡。在移动设备上很好，但在网络上，我需要添加 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>

有可能实现吗？

【问题讨论】：

我添加了一个类似问题的链接，如果您要找的话，请告诉我:)

哦，谢谢，我现在检查一下

话虽如此，我也可以通过在类别中使用幻灯片来做类似的事情。结果类似于this。如果您愿意，我可以使用代码中最相关的部分添加答案。

顺便说一句，它奏效了！谢谢。也可以回答。那些幻灯片看起来不错。

【参考方案1】：

尽管这个问题可能被认为是另一个问题的重复，但我仍然会添加这个答案，因为我认为有更好的方法来处理类别（至少从 UI/UX 的角度来看）。

最终结果如下所示：

基本上，我们使用 Ionic 滑块组件来显示类别，但每张幻灯片最多显示 3 个类别。

查看：

在视图中，我们只需要添加一个带有一行的工具栏，其中包含 3 列：一列用于左箭头，另一列用于滑块，最后一列用于右箭头。另请注意，我们在 ion-slides 元素中设置了 slidesPerView="3" 属性。

<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>

组件代码：

然后我们只需要处理当任何类别被选中，或者当前幻灯片发生变化时要做什么：

// 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();
    

样式：

    .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;
        
    

【讨论】：

(click)="filterData(category.id)" 我无法调用这个函数

我找到了我们必须导入幻灯片的解决方案，就像您对来自 ionc-angular 的幻灯片所做的那样，然后我可以调用点击功能

很高兴听到你解决了 :)

您在离子载玻片内仅显示三张载玻片是否可以根据离子载玻片内的数据显示载玻片的数量

因为我在一张幻灯片中有大类别和一些小类别，所以我得到两行名称任何解决方案