IONIC中slides的使用(图片显示及其删除)

    先看效果（本来想上传一段视频，但好像CSDN不支持视频格式文件的上传，可以上传gif动态图）

html

<ion-content>
  <ion-slides pager>
    <ion-slide *ngFor="let img of images;let i=index">
      <ion-toolbar class="tolbar-layout">                  
        <ion-buttons center>        
          <button ion-button color="primary">{{img.Name}}</button>
        </ion-buttons>
      </ion-toolbar> 
      <img src="{{img.src}}" (press)="ImgPress()" />
    </ion-slide>
  </ion-slides>
</ion-content>

css 

  .tolbar-layout{
        min-height: 45px;
        position: absolute;
        opacity: 0.6;
    }
    
    .slide-zoom{
        height: 100%;

        img {
            min-height: 100%;
        }
    }

 ts

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

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})

export class ContactPage {

  @ViewChild(Slides) componentSlides: Slides;

  images: any = [];

  constructor(public navCtrl: NavController,
    public alertCtrl: AlertController) {

    this.images = [{ src: 'assets/imgs/landscape/space1.jpg', Name: 'space1' },
    { src: 'assets/imgs/landscape/space2.jpg', Name: 'space2' },
    { src: 'assets/imgs/landscape/space3.jpg', Name: 'space3' },
    { src: 'assets/imgs/landscape/space4.jpg', Name: 'space4' },
    { src: 'assets/imgs/landscape/space5.jpg', Name: 'space5' },
    { src: 'assets/imgs/landscape/space6.jpg', Name: 'space6' },
    { src: 'assets/imgs/landscape/space7.jpg', Name: 'space7' }];

  }

  //长按删除图片
  ImgPress() {
    let alert = this.alertCtrl.create({
      message: "确认删除吗？",
      buttons: [{
        text: '取消',
        role: 'cancel'
      }, {
        text: '确定',
        handler: () => {
          this.DeleteImg();
        }
      }]
    })
    alert.present();

  }

  //删除图片
  DeleteImg() {
    var id;
    var index = this.componentSlides.getActiveIndex();
    if (index < this.images.length) {
      id = this.images[index].id;
    } else {
      id = this.images[index - 1].id;
    }

    for (var i = 0; i < this.images.length; i++) {
      if (this.images[i].id == id) {
        this.images.splice(i, 1);
        //如果删除的是最后一张图片，删除完后直接跳转到上一张图片
        if (i + 1 === this.componentSlides.length()) {
          this.componentSlides.slideTo(i - 1);
        }
        break;
      }
    }

    //判断图片删除完后，是否还有图片，如果没有，则退出
    if (this.images.length == 0) {
      this.navCtrl.pop();
    }
  }

}