ionic3 图片（轮播）预览 ionic-gallary-modal组件使用方法

一、效果展示

使用方法：

1、npm安装ionic-gallary-modal扩展模块

npm install ionic-gallery-modal --save

2、在app.module.ts根模块中导入图片预览模块 ionic-gallary-modal 和 浏览器手势事件模块 HAMMER_GESTURE_CONFIG

import * as ionicGalleryModal from ‘ionic-gallery-modal‘;
import { HAMMER_GESTURE_CONFIG } from ‘@angular/platform-browser‘;

@NgModule({    declarations: [        MyApp    ],    imports: [　　　　　......        BrowserModule,        ionicGalleryModal.GalleryModalModule,       　.....    ],    bootstrap: [IonicApp],    entryComponents: [        MyApp    ],    providers: [       　......        {            provide: HAMMER_GESTURE_CONFIG,            useClass: ionicGalleryModal.GalleryModalHammerConfig,        }    ]})

3、在实例页面（组件）中配置封装调用方法：

　　根据具体需求可将下面代码封装在Common.ts公共服务库中，以便随时调用即可

import { ModalController } from ‘ionic-angular‘;
import { GalleryModal } from ‘ionic-gallery-modal‘;

/** * (单图)多图预览model组件封装 * @param photoData 输入图片地址 * @param {string} key 对象图片url对应的属性名程 */

public photoViews(photoData,key = ‘‘){    let photos:Array<object> = [];    let obj = {};    // 单张图片时（photoData为一个图片地址字符串且不为空）    if(photoData && typeof(photoData) == "string"){        obj = {};        obj[‘url‘] = photoData;        photos.push(obj);    }    console.log(photoData)

// 多张图片时（photoData为图片地址字符串数组）    if(photoData instanceof Array){        console.log(photoData)        photoData.forEach(function(item,index,array){            obj = {};            // photoData 为字符串数组时（即key不存在时）            if(key == ‘‘ && item){                obj[‘url‘] = item;                photos.push(obj);            }            // photoData 为对象数组时（即key存在时）            console.log(item[key])            if(key != ‘‘ && item[key]){                obj[‘url‘] = item[key];                photos.push(obj);            }        });    }    let modal = this.modalCtrl.create(GalleryModal, {        photos: photos,        initialSlide: 0    });    modal.present();}

4、实际调用：

import {CommonProvider} from "../../providers/common";
constructor(public navCtrl: NavController,
    public Common:CommonProvider) {
}

/** * 图片预览调用 * @param photoData 输入预览图片数据 * @param key   图片url对应的属性名 */

public viewPhoto(photoData,key){ this.Common.photoViews(photoData,key); }

原文地址：https://www.cnblogs.com/hsl-shiliang/p/8707545.html