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

3)在你的页面中直接使用ModalController来展示:

注意photos数组里面,加上url属性,默认格式为Array[{ url: string }],否则组件找不到url。

initialSlide是默认加载的图片的索引,不要超出索引范围。

效果如下:

 

 

												

Ionic3 UI组件之 Gallery Modal的更多相关文章

  1. 第31讲 UI组件之 Gallery画廊控件

    第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...

  2. Ionic3 UI组件之 ImagePicker

    ImagePicker插件实现设备上的多个图像选择的功能. 组件特性: 统一选择界面,避免不同设备选择界面不一样的问题: 支持多选,并且可以设置最多选择的张数: 选择数量超出设置时会提示: Camer ...

  3. Ionic3 UI组件之 PhotoViewer

    PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...

  4. Ionic3 UI组件之 ImageLoader

    ImageLoader:通过后台线程加载图片(异步)并缓存.类似于Glide或者Picasso. 组件特性: 后台线程下载图片,下载速度更快,不使用webview的资源: 缓存图像.图像将在您下次显示 ...

  5. Ionic3 UI组件之 ImageViewer

    组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...

  6. Ionic3 UI组件之 autocomplete

    无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...

  7. 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  8. AngularJs的UI组件ui-Bootstrap分享(十)——Model

    Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...

  9. 第29讲 UI组件之 ListView与 BaseAdapter,SimpleAdapter

    第29讲 UI组件之 ListView与 BaseAdapter,SimpleAdapter 1.BaseAdapter BaseAdapter是Android应用程序中经常用到的基础数据适配器,它的 ...

随机推荐

  1. NET 时间字符串转换

    // 把指定格式的日期字符串转换为时间:2018/11/1 0:00:00 DateTime.ParseExact("2018a11","yyyyaMM",Sy ...

  2. npm安装和Vue运行

    一.开始: 下载地址:http://nodejs.cn/download/ 下载安装: 直到 二.打开CMD,检查是否正常 在安装目录里新增两个文件夹 然后运行命令:如下图: npm config s ...

  3. 区别script中的type=”text/javascript”和language=”Javascript”

    内容提要 在制作网页的时候,往往需要在页面中使用客户端能够运行的JS代码,因此,都需要添加引用.JS引用一般有type="text/javascript"和language=&qu ...

  4. C#多线程编程系列(三)- 线程同步

    目录 1.1 简介 1.2 执行基本原子操作 1.3 使用Mutex类 1.4 使用SemaphoreSlim类 1.5 使用AutoResetEvent类 1.6 使用ManualResetEven ...

  5. 如何把OpenWrt安装到PC?

    前言 什么是openwrt? 它是一个适用于路由器的Linux发行版.和其他Linux发行版一样,它也内置了包管理工具,你可以从一个软件仓库里直接安装软件.OpenWrt可以用在所有需要嵌入式Linu ...

  6. Android - "已安装了存在签名冲突的同名数据包",解决方法!

    错误提示:已安装了存在签名冲突的同名数据包. 解决方法:打开Android Studio,打开logcat,用usb线连接你出错的手机,识别出手机之后,在你的项目后面,点击“run”按钮,随后AS会提 ...

  7. LayUI把表格中的时间戳改成格式化的时间

  8. 如何优雅的调戏XSS

    作者:i春秋作家——万年死宅 前言 这篇paper,我们将学习如何优雅的调戏XSS.我们会教大家一些不常用的,但很实用的XSS姿势.我们在正式进入主题之前,先来说一下,该篇paper将涉及的内容: 正 ...

  9. linux中 ll 和ls 区别

    ll 列出来的结果详细,有时间,是否可读写等信息 ,象windows里的 详细信息ls 只列出文件名或目录名 就象windows里的  列表 ll -t 是降序,  ll -t | tac 是升序 l ...

  10. vsftp小记

    安装一个vsftp都有问题(Version: 3.0.2-14ubuntu1),提示530 错误,之后修改配置如下(红色): # cat /etc/pam.d/vsftpdauth required ...