ionic-framework - Ionic 3 如何修复离子幻灯片的第一张幻灯片，其中应该显示规格和用户在报价之间滑动以进行比较？

Question

有没有办法修复第一张幻灯片ion-slide并让其他幻灯片移动？

我正在尝试制作一个比较页面，其中主要规格应该在开始并固定，然后用户可以在优惠之间滑动并继续查看规格。

这是关于它的堆栈闪电战。

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

Answer 1

尝试这个

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

Answer 2

一种方法是使用div带有某些样式的固定来使其看起来像幻灯片。结果将是这样的：

请看一下这个 stackblitz 演示。

---

零件

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>

风格

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