Ionic 3 Как исправить первый слайд ионных слайдов, где должны отображаться спецификации, и пользователь проводит пальцем между предложениями для сравнения? - PullRequest
Новая
       63

Ionic 3 Как исправить первый слайд ионных слайдов, где должны отображаться спецификации, и пользователь проводит пальцем между предложениями для сравнения?

1 голос
/ 22 июня 2019

Есть ли способ исправить первый слайд ion-slide и позволить другим перемещаться?

Я пытаюсь сделать страницу сравнения, где основные спецификации должны быть в начале и исправлены, а затемпользователи могут перемещаться между предложениями и постоянно просматривать спецификации.

Вот stackblitz об этом. 

<ion-content padding>
    <ion-slides slidesPerView="3">
        <ion-slide>
          Fixed Slide
        </ion-slide>
        <ion-slide *ngFor="let offer of arrayOfOffers; let i = index">
          {{offer.data.cname}}
        </ion-slide>
      </ion-slides>
</ion-content>

А для сценария машинописного текста это пока простодля тестирования: 

arrayOfOffers:any[]=[];
    constructor(public navCtrl: NavController) {
      this.arrayOfOffers = [
        {id: 1, Name: 'Ali'}, {id: 2, Name: 'Sara'}, {id: 3, Name: 'Joanna'}]
    }

Ответы [ 2 ]

1 голос
/ 22 июня 2019

Один из способов сделать это - использовать фиксированный div с некоторыми стилями, чтобы он выглядел как слайд. Результат будет примерно таким:

enter image description here

Пожалуйста, ознакомьтесь с этой демонстрацией стекаблиц .

Компонент 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
export class HomePage {
  arrayOfOffers: any[] = [];

  constructor(public navCtrl: NavController) {
    this.arrayOfOffers = [
      { id: 1, name: 'Ali', color: 'red'}, 
      { id: 2, name: 'Sara', color: 'green'}, 
      { id: 3, name: 'Joanna', color: 'purple'}
    ]
  }
}

View 

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div class="compare-section">

    <!-- Fixed section -->
    <div class="compare-section__fixed">
      <p>Fixed Slide</p>
    </div>

    <!-- Slides -->
    <ion-slides class="compare-section__slides" slidesPerView="2">
      <ion-slide *ngFor="let offer of arrayOfOffers; let i = index"
      [style.background-color]="offer.color">
        {{ offer.name }}
      </ion-slide>
    </ion-slides>

  </div>
</ion-content>

Стили 

.compare-section {
  height: 100%;
  width: 100%;
  overflow: hidden;

  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.compare-section__fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-width: 120px; // Change this based on your requirements
  background: blue;
}
1 голос
/ 22 июня 2019

попробуйте 

<div class="row">
    <ion-col col-3>
      Fixed Slide
    </ion-col>
    <ion-col col-9>
      <ion-slides slidesPerView="3">
        <ion-slide *ngFor="let offer of arrayOfOffers; let i = index">
          {{offer.Name}}
        </ion-slide>
      </ion-slides>
    </ion-col>
  </div>
...