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