ionic3自定义图片弹窗轮播显示组件

一、需求

使用ionic3制作页面时，有时候多张图片直接在页面上显示，查看起来不是很方便，需要点击图片后，能够弹窗显示，且多张图片可以在弹窗中左右滑动切换显示，弹窗中有点击事件时，则关闭弹窗；左右滑动事件时，则左右切换图片。

二、方案分析

ionic3中的Modal组件、Slider组件和scroll组件的结合可以解决以上需求。
Modal提供需要的弹窗；Slides提供图片的左右切换效果；scroll大尺寸图片的滚动；

三、实现

步骤

1、新建SlideImg自定义组件，用于在Modal中打开
2、新建ShowPIc服务，传入参数用于调用弹窗
3、在页面中调用ShowPIc中方法，实现弹窗轮播显示

代码：

1、执行以下代码，新建SlideImg组件

ionic g component SlideImg

系统自动创建以下文件

image.png

2、修改components.module.ts

import { PipesModule } from './../pipes/pipes.module';
import { NgModule } from '@angular/core';
import { SlideImgComponent } from './slide-img/slide-img';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
    declarations: [
        SlideImgComponent
    ],
    imports: [
        IonicPageModule,//引入IonicPageModule，才可以使用ionic的组件
    ],
    exports: [SlideImgComponent]
})
export class ComponentsModule { }

3、修改slide-img.html

//loop：是否无限循环 pager：是否显示分页 initialSlide：默认显示的轮播页面 centeredSlides:轮播页面是否屏幕居中
<ion-slides pager="true" loop="true" #Slides [initialSlide]="Index" centeredSlides>
  <ion-slide *ngFor="let pic of Pics;let i=index;" (click)="HideBigImg()">
    <ion-scroll scrollX="true" scrollY="true" zoom="true" maxZoom="true">
      <img src="{{pic.filepath}}" />
    </ion-scroll>
  </ion-slide>
</ion-slides>

4、修改slide-img.scss

slide-img {
    background-color: #000;
    .slide-zoom{ height: 100%;}
    ion-scroll { white-space: nowrap;width: 100%; height: 100%; }
    ion-scroll .scroll-content{display: flex; flex-direction: column; justify-content:center;}
    ion-scroll .scroll-zoom-wrapper{ }
}

5、修改slide-img.ts

import { NavParams, ViewController} from 'ionic-angular';
import { Component} from '@angular/core';

@Component({
  selector: 'slide-img',
  templateUrl: 'slide-img.html'
})
export class SlideImgComponent {
  private Pics: Array<any>;
  private Index: number;
  constructor(private navparam: NavParams, private viewCtrl: ViewController) {
    this.Index = this.navparam.get("index");
    this.Pics = this.navparam.get("pics");
  }

  HideBigImg() {
    this.viewCtrl.dismiss();
  }

6、封装ShowBigImg，方便调用
创建服务

ionic g provider ShowPic

import { Injectable } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { SlideImgComponent } from '../../components/slide-img/slide-img';
@Injectable()
export class ShowPicProvider {
  constructor(private modalCtrl: ModalController) {
  }
  ShowBigImg(i: number, pics: Array<any>) {
    let profileModal = this.modalCtrl.create(SlideImgComponent, { index: i, pics: pics });
    profileModal.present();
  }
}

7、调用
我们最终是调用ShowBigImg服务中ShowBigImg方法，调用前需要确保：
1、app.module.ts中已经申明providers：[ShowPicProvider]
2、由于需要使用modal，modal中创建的component需要在app.module.ts中

import { ShowPicProvider } from '../providers/show-pic/show-pic';
@NgModule({
...
imports:[ComponentsModule],
entryComponents：[SlideImgComponent]
...
})

调用方法：

import { ShowPicProvider } from './../../../providers/show-pic/show-pic';
constructor(private showpic: ShowPicProvider){}
  ShowBigImg(i: number, pics: Array<any>) {
    this.showpic.ShowBigImg(i,pics);
  }