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

Question

有没有办法修复 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>

对于 typescript 脚本，目前对于测试目的来说很简单：

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 使其看起来像幻灯片。结果将是这样的：

请看this stackblitz demo.

组件

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

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

Ionic 3 How to fix the first slide of ion slides where the specs should be displayed and user swipe between offers to compare?

fixed

slider

ionic-framework

ion-slides

ionic3