Ionic framework Ionic 3如何修复Ionic幻灯片的第一张幻灯片，其中应显示规格，并且用户在提供的服务之间滑动以进行比较？

是否有办法修复离子载玻片的第一个载玻片，并使其他载玻片可移动

我正在尝试做一个比较页面，其中主要规格应该在开始和固定，然后用户可以在提供之间滑动，并继续看到规格

这里有一个关于它的例子

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

试试这个

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

固定滑梯
{{offer.Name}

一种方法是使用固定的

div

和一些样式，使其看起来像幻灯片。结果会是这样的：

请看一下

---

组件

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'}
    ]
  }
}

查看

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

---

就这样。谢谢。@听到这个消息我很高兴：）

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