Ionic2 显示多张幻灯片。或者它的一部分

Posted 2023-03-05

【中文标题】Ionic2 显示多张幻灯片。或者它的一部分

【英文标题】：Ionic2 show multiple slides. Or part of it

【发布时间】：2017-06-03 17:11:03

【问题描述】：

我正在使用 ionic2，我想在我的项目中为卡片使用滑块。所有卡片都有图像。虽然 ion-slides 非常好，但我不能让它像我想要的那样工作。我希望我一次可以在屏幕上放置不止一张幻灯片，或者至少可以在其他幻灯片中放置一部分。像这样：

因此，下一张和最后一张牌的一部分会很明显。有人知道怎么做吗？

现在我有这个：

import  Component  from '@angular/core';

import  NavController  from 'ionic-angular';

@Component(
  selector: 'page-page1',
  templateUrl: 'page1.html'
)
export class Page1 
  public extraOptions;

  constructor(public navCtrl: NavController) 
    this.extraOptions = 
      slidesPerView: 3
      
  

page-page1 
    overflow:hidden;


ion-content 
    overflow: hidden;


ion-slides 
    //height: 70%;
    //width: 30%;


ion-slide 
    //width: 50px;


ion-card 
  background-color: #652345;


img
  //margin: 5%;
  //max-width: 90%;


.card1 
    background-color: mediumseagreen;


.card2 
    background-color: cornflowerblue;


.questionblock 
    background-color: transparent;

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>

 <ion-slides effect="sides" initialSlide=1 pager = true slidesPerView=2> 
    <ion-slide>
        <ion-card class="card1">
            <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Nine Inch Nails Live
                </ion-card-title>
                <p>Cuidador de Mascotas</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

    <ion-slide class="questionblock">
        <ion-card class="questionblock">
            <img src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Quesstion
                </ion-card-title>
                <p>where is the love...</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

    <ion-slide>
        <ion-card class="card2">
            <img class="img" src="http://www.wormsandgermsblog.com/files/2009/02/PETS_0803_dog_bath1.jpg" />
            <ion-card-content>
                <ion-card-title>
                    Nine Inch Nails Live
                </ion-card-title>
                <p>Ninera con experienc...</p>
            </ion-card-content>
        </ion-card>
    </ion-slide>

  </ion-slides>

  <button ion-button>Button</button>
</ion-content>

【参考方案1】：

更新 Ionic 2.0.0

slidesPerView 现在被添加到 ion-slides 的输入中。所以我们可以直接将它包含在html本身中，如下所示

<ion-slides pager loop slidesPerView="3">
   <ion-slide>
    ...
    </ion-slide>
</ion-slides>

离子 RC.5

由于 RC5 的一些变化，离子载玻片无法正常工作。您可以尝试使用变量设置幻灯片选项。 用以下代码替换 html 中的 ion-slides

 <ion-slides #slider> 
   ...
 </ion-slides>

使用变量在你的ts文件中设置slide属性

import  Component, ViewChild  from '@angular/core';
import  NavController, Slides  from 'ionic-angular';

@Component(
  selector: 'page-page1',
  templateUrl: 'page1.html'
)
export class page1Page 

  @ViewChild(Slides) slider: Slides;
  constructor(public navCtrl: NavController) 

  
  ngAfterViewInit()
    this.slider.slidesPerView = 3;
    this.slider.pager = true;
  

更多详情请参考https://github.com/driftyco/ionic/issues/9988#issuecomment-272473892。

【参考方案2】：

Css 的变化

ion-slides 
        width: 200% !important;
        margin-left: -50% !important;
    

HTML 的变化

<ion-slides slidesPerView= 3 spaceBetween= 16 loop=true>

【参考方案3】：

在 ionic 5 中真的很简单，为了在每次视图中显示 N 张幻灯片，您可以在您的 css 中添加以下内容（将 N 替换为每次视图的幻灯片数）：

.swiper-slide 
  width: calc(100% / N) !important;