Ionic3 UI組件之Gallery Modal詳解
更新時(shí)間：2017年06月07日 15:13:34 作者：tomKart
這篇文章主要為大家詳細(xì)介紹了Ionic3 UI組件之Gallery Modal的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Gallery Modal可以理解為相冊的預(yù)覽界面?？梢燥@示網(wǎng)絡(luò)圖片，也可以顯示base64Image。
在這個(gè)例子中，我用來實(shí)現(xiàn)圖片的預(yù)覽功能。
相機(jī)拍照，或者相冊選擇圖片后，用縮略圖組件顯示縮略圖，點(diǎn)擊縮略圖可以預(yù)覽大圖。
組件特性：
- 支持手勢縮放
- 可加載網(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）在你的頁面中直接使用ModalController來展示：
注意photos數(shù)組里面，加上url屬性，默認(rèn)格式為Array[{ url: string }],否則組件找不到url。
initialSlide是默認(rèn)加載的圖片的索引，不要超出索引范圍。
效果如下：
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要分享一個(gè)自己寫的簡單的javascript分頁組件，效果十分不錯(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)的簡單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄鷍s三級(jí)聯(lián)動(dòng)的簡單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
Javascript類型轉(zhuǎn)換的規(guī)則實(shí)例解析
這篇文章主要介紹了Javascript類型轉(zhuǎn)換的規(guī)則實(shí)例解析，涉及到j(luò)avascript類型轉(zhuǎn)換相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-02-02
在使用UniApp開發(fā)中,通過WebView組件加載本地網(wǎng)頁時(shí),往往會(huì)遇到跨域問題,下面這篇文章主要介紹了UniApp?WebView頁面中的請求跨域問題解決的相關(guān)資料,需要的朋友可以參考下2024-10-10
js實(shí)現(xiàn)類bootstrap模態(tài)框動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)類bootstrap模態(tài)框動(dòng)畫的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了JavaScript函數(shù)的使用教程，JavaScript函數(shù)是被設(shè)計(jì)為執(zhí)行特定任務(wù)的代碼塊。JavaScript函數(shù)會(huì)在某代碼調(diào)用它時(shí)被執(zhí)行。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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技巧分享,本文講解的都是開發(fā)中總結(jié)出的編碼技巧、和最佳實(shí)踐,需要的朋友可以參考下2014-11-11
JavaScript設(shè)計(jì)模式之職責(zé)鏈模式詳解
職責(zé)鏈模式的定義是：使多個(gè)對(duì)象都有機(jī)會(huì)處理請求，從而避免請求的發(fā)送者和接收者之間的耦合關(guān)系，將這些對(duì)象連成一條鏈，并沿著這條鏈傳遞該請求，直到有一個(gè)對(duì)象處理它為止2022-08-08