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

Posted 2020-10-29 千叶祥龙

一、效果展示

使用方法：

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