Ionic – scheda scroll orizzontale per categorie

Sto lavorando a un’applicazione web / mobile con dispositivi mobili e abbiamo questa scheda di scorrimento orizzontale sopra che rappresenta le categorie. Sul cellulare va bene, ma sul web devo aggiungere 2 flash uno sul lato destro e uno sul lato sinistro. Quando l’utente fa clic su di essi, lo scorrimento dovrebbe spostarsi in quella direzione.

   
All Groups
{{item.CategoryName}}

È ansible raggiungerlo?

Evento anche se queste domande possono essere considerate come un duplicato di un’altra domanda, aggiungerò comunque questa risposta perché penso che ci sia un modo migliore per gestire le categorie (almeno dal punto di vista UI / UX).

Il risultato finale sarebbe simile a questo:

Categorie Demo

Fondamentalmente, stiamo usando il componente di scorrimento Ionic per mostrare le categorie, ma mostrando fino a 3 categorie per slide.

Vista:

Nella vista abbiamo solo bisogno di aggiungere una barra degli strumenti con una riga, che includerà 3 colonne all’interno: una per la freccia sinistra, un’altra per il cursore e l’ultima per la freccia destra. Si noti inoltre che stiamo impostando la proprietà slidesPerView="3" nell’elemento ion-slides .

    App Name          

{{ category.name }}

Codice componente :

Quindi dobbiamo solo gestire cosa fare quando viene selezionata una categoria o quando cambia la diapositiva corrente:

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

stili:

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