Ionic - 类别的水平滚动选项卡 [英] Ionic - Horizontal scroll tab for Categories

查看:29
本文介绍了Ionic - 类别的水平滚动选项卡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发一个带有移动设备的网络/移动应用程序,我们在上面有一个代表类别的水平滚动选项卡.在移动设备上它很好,但在网络上我需要添加 2 个闪光灯,一个在右侧,一个在左侧.当用户点击它们时,滚动条应该向那个方向移动.

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.

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

有可能实现吗?

推荐答案

虽然这个问题可能被认为是另一个问题的重复,但我仍然会添加这个答案,因为我认为有更好的方法来处理这些类别(至少,从 UI/UX 的角度来看).

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

最终结果如下:

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

Basically, we're using the Ionic slider component to show the categories, but showing up to 3 categories per slide.

查看:

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

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-slides element.

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

组件代码:

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

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

样式:

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

这篇关于Ionic - 类别的水平滚动选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆