Ionic3 UI組件之Gallery Modal詳解
更新時(shí)間：2017年06月07日 15:13:34 作者：tomKart
這篇文章主要為大家詳細(xì)介紹了Ionic3 UI組件之Gallery Modal的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Gallery Modal可以理解為相冊(cè)的預(yù)覽界面?？梢燥@示網(wǎng)絡(luò)圖片，也可以顯示base64Image。
在這個(gè)例子中，我用來(lái)實(shí)現(xiàn)圖片的預(yù)覽功能。
相機(jī)拍照，或者相冊(cè)選擇圖片后，用縮略圖組件顯示縮略圖，點(diǎn)擊縮略圖可以預(yù)覽大圖。
組件特性：
- 支持手勢(shì)縮放
- 可加載網(wǎng)絡(luò)圖片，也可以加載本地圖片或者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）在你的頁(yè)面中直接使用ModalController來(lái)展示：
注意photos數(shù)組里面，加上url屬性，默認(rèn)格式為Array[{ url: string }],否則組件找不到url。
initialSlide是默認(rèn)加載的圖片的索引，不要超出索引范圍。
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6的循環(huán)與可迭代對(duì)象的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
JS 循環(huán)li添加點(diǎn)擊事件 （閉包的應(yīng)用）
這篇文章主要介紹了js循環(huán)li添加點(diǎn)擊事件 （閉包的應(yīng)用）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
JS+CSS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
js實(shí)現(xiàn)兼容IE、Firefox的圖片縮放代碼
這篇文章主要介紹了js實(shí)現(xiàn)兼容IE、Firefox的圖片縮放代碼,涉及JavaScript操作圖片元素的相關(guān)技巧,需要的朋友可以參考下2015-12-12
javascript HTML5文件上傳FileReader API
這篇文章主要介紹了javascript HTML5文件上傳FileReader API的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
Underscore 是一個(gè) JavaScript 工具庫(kù)，它提供了一整套函數(shù)式編程的實(shí)用功能，但是沒有擴(kuò)展任何 JavaScript 內(nèi)置對(duì)象。這篇文章主要介紹了underscore源碼分析相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
彈出式菜單想必大家在瀏覽網(wǎng)頁(yè)時(shí)都有見過吧，本文要為大家介紹的是可折疊的彈出式菜單，你若感興趣可以參考下2014-04-04
這篇文章主要介紹了JS數(shù)組方法slice()用法,結(jié)合實(shí)例形式分析了JavaScript數(shù)組slice()方法具體功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
本文章通過實(shí)例代碼給大家詳細(xì)介紹js中正則表達(dá)式的全局匹配模式 /g的用法，需要的朋友參考下2017-04-04
這篇文章主要介紹了微信小程序引用iconfont圖標(biāo)的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10