Ionic2实战-图片点击缩放功能开发（转）

最新推荐文章于 2023-10-26 11:09:24 发布

转载最新推荐文章于 2023-10-26 11:09:24 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/strong90/article/details/78850703

前端知识同时被 2 个专栏收录

110 篇文章

订阅专栏

ionic

20 篇文章

订阅专栏

本文详细介绍如何在Ionic项目中安装、配置并使用ionic-gallery-modal插件，实现图片预览和轮播功能。包括插件的GitHub地址、安装命令、模块引入方式、图片数组转换方法及如何创建和展示图片模态框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 插件安装

github地址：https://github.com/nikini/ionic-gallery-modal

安装：

npm install ionic-gallery-modal --save

2.插件引入(这个插件在页面的module.ts中引入会报错)

app.modules.ts

import * as ionicGalleryModal from 'ionic-gallery-modal';

import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

imports: [

    ionicGalleryModal.GalleryModalModule,

    ...

],

providers: [

    ...

    {

        provide: HAMMER_GESTURE_CONFIG,

        useClass: ionicGalleryModal.GalleryModalHammerConfig,

    },

    ...

]

3.插件使用

需要使用的pages的html:

<p (click)="openModal(image)" *ngIf="image">

<img src="{{image }}">

</p>

ts:

import { ModalController } from 'ionic-angular';

import { GalleryModal } from 'ionic-gallery-modal';

// 这个插件要求图片数组是以下形式的, 所以需要一个转换

private photos: any[] = [];

imageArray: any[] = [

'/assets/to-user.jpg',

'/assets/user.jpg',

'/assets/yuyin.png'

];

constructor(private modalCtrl: ModalController,

....,) {

// Get the navParams toUserId parameter

}

// 把图片数组转换成插件需要的数组

changeArrayToGallery(array) {

for (let i = 0; i < array.length; i++) {

var object = { "url": array[i]};

this.photos.push(object);

}

}

// js通过元素获取在数组中的下标位置

getIndexOfArray (object) {

var index = this.imageArray.indexOf('/assets/yuyin.png');

return index;

}

openModal(image) {

// 获取当前点击图片所在数组下标

var index = this.getIndexOfArray(image);

// 图片数组转换成插件需要的数组

this.changeArrayToGallery(this.imageArray);

// 显示图片预览

let modal = this.modalCtrl.create(GalleryModal, {

photos: this.photos,

initialSlide: index,

});

modal.present();

}

---------------------
版权声明：本文为优快云博主「strong90」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/strong90/article/details/78850703