Ionic3 UI元件之Gallery Modal詳解

Ionic3 UI元件之Gallery Modal詳解

Gallery Modal可以理解為相簿的預覽介面。可以顯示網路圖片,也可以顯示base64Image。

在這個例子中,我用來實現圖片的預覽功能。

相機拍照,或者相簿選擇圖片後,用縮圖元件顯示縮圖,點選縮圖可以預覽大圖。

元件特性:

支援手勢縮放
可載入網路圖片,也可以載入本地圖片或者base64Image

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

1)安裝包:


npm install ionic-gallery-modal --save

2)在app.module.ts中新增:


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

3)在你的頁面中直接使用ModalController來展示:

注意photos陣列裡面,加上url屬性,預設格式為Array[{ url: string }],否則元件找不到url。

initialSlide是預設載入的圖片的索引,不要超出索引範圍。

效果如下:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

Ionic3實現圖片瀑布流佈局Ionic3 UI元件之autocomplete詳解ionic3 懶載入