溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Ionic3 UI組件之Gallery Modal詳解

發布時間:2020-10-17 17:05:52 來源:腳本之家 閱讀:196 作者:tomKart 欄目:web開發

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';

Ionic3 UI組件之Gallery Modal詳解

Ionic3 UI組件之Gallery Modal詳解

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

Ionic3 UI組件之Gallery Modal詳解

注意photos數組里面,加上url屬性,默認格式為Array[{ url: string }],否則組件找不到url。

initialSlide是默認加載的圖片的索引,不要超出索引范圍。

效果如下:

Ionic3 UI組件之Gallery Modal詳解Ionic3 UI組件之Gallery Modal詳解

Ionic3 UI組件之Gallery Modal詳解Ionic3 UI組件之Gallery Modal詳解

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女