Ionic3 UI組件之Gallery Modal詳解
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)文章
分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件
這篇文章主要分享一個(gè)自己寫(xiě)的簡(jiǎn)單的javascript分頁(yè)組件，效果十分不錯(cuò)，代碼也很詳盡，這里推薦給小伙伴們。2015-02-02
es6中的import導(dǎo)入模塊 和 export導(dǎo)出模塊詳解
require 是 CommonJS 模塊系統(tǒng)中用于導(dǎo)入模塊的關(guān)鍵字,采用同步加載方式；而 import 和 export 是 ES6 模塊系統(tǒng)中用于導(dǎo)入和導(dǎo)出模塊的關(guān)鍵字,采用靜態(tài)加載方式,并且支持異步加載,這篇文章主要介紹了es6中的import導(dǎo)入模塊 和 export導(dǎo)出模塊,需要的朋友可以參考下2023-11-11
原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇原生js三級(jí)聯(lián)動(dòng)的簡(jiǎn)單實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
Javascript類(lèi)型轉(zhuǎn)換的規(guī)則實(shí)例解析
這篇文章主要介紹了Javascript類(lèi)型轉(zhuǎn)換的規(guī)則實(shí)例解析，涉及到j(luò)avascript類(lèi)型轉(zhuǎn)換相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-02-02
UniApp?WebView頁(yè)面中的請(qǐng)求跨域問(wèn)題解決
在使用UniApp開(kāi)發(fā)中,通過(guò)WebView組件加載本地網(wǎng)頁(yè)時(shí),往往會(huì)遇到跨域問(wèn)題,下面這篇文章主要介紹了UniApp?WebView頁(yè)面中的請(qǐng)求跨域問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2024-10-10
js實(shí)現(xiàn)類(lèi)bootstrap模態(tài)框動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)類(lèi)bootstrap模態(tài)框動(dòng)畫(huà)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JavaScript函數(shù)的使用教程，JavaScript函數(shù)是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊。JavaScript函數(shù)會(huì)在某代碼調(diào)用它時(shí)被執(zhí)行。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
js 圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼
這篇文章介紹了js圖片隨機(jī)不定向浮動(dòng)的實(shí)現(xiàn)代碼，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了20個(gè)實(shí)用的JavaScript技巧分享,本文講解的都是開(kāi)發(fā)中總結(jié)出的編碼技巧、和最佳實(shí)踐,需要的朋友可以參考下2014-11-11
JavaScript設(shè)計(jì)模式之職責(zé)鏈模式詳解
職責(zé)鏈模式的定義是：使多個(gè)對(duì)象都有機(jī)會(huì)處理請(qǐng)求，從而避免請(qǐng)求的發(fā)送者和接收者之間的耦合關(guān)系，將這些對(duì)象連成一條鏈，并沿著這條鏈傳遞該請(qǐng)求，直到有一個(gè)對(duì)象處理它為止2022-08-08