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. AbpZero之企业微信---登录(拓展第三方auth授权登录)---第二步:开始逐步实现企业微信登录

    上回分解到AbpZero的auth登录机制,这里我们开始着手逐步实现我们的auth登录. 我们新建一个类库XXXX.Web.Authentication.External 在类库下新建一个类QYWec ...

  2. 【加密算法】DES

    一.简介 DES对称加密,是一种比较传统的加密方式,其加密运算.解密运算使用的是同样的密钥,信息的发送者和信息的接收者在进行信息的传输与处理时,必须共同持有该密码(称为对称密码),是一种对称加密算法. ...

  3. Day 20 Time 模块.

    from collections import namedtuplePoint =namedtuple("Point",["x","y"]) ...

  4. Java基础学习篇---------static

    一.static的使用 1.使用static定义的属性往往通过类名直接调用,它的属性(方法)不属于某一个的对象的.所以对象没有创建之前就可以对static的属性的调用,方法亦如此. 2.static ...

  5. jzoj5996

    我們可以枚舉每一個串的最短回文後綴,這樣一定不會算重. 雖然一個字符串可能會有多個回文後綴,但是答案只會在最短的後綴被計算 記f[i]表示長度為i回文串中,沒有長度>1的回文後綴的個數,將總個數 ...

  6. python 爬图 helloworld

    最近发现 吾志 上用户的头像都很个性,另外,对于没有把日记设为私密的用户,最后一天的日记是公开的,谁都可以查看. 所以,如果每天把所有可查看的日记爬一遍,那么-- 哈哈 以前对爬虫只是了解一点点,没有 ...

  7. 教你利用Node.js漏洞搞事情

    PentestingNode.js Application : Nodejs Application Security 原文地址:http://www.websecgeeks.com/2017/04/ ...

  8. PHP之旅5 php的函数

    函数的结构 php的函数和其他语言的函数基本类似,和C语言比较的话主要区别在于php是一个弱语言,对类型不敏感,在函数的表现上就是,php函数没有类型定义,不像语言即使无参也要定义为void,而且不管 ...

  9. iOS-Button图片和文字垂直居中【按钮图片和文字同时居中】

    以前不怎么有这样的需求,最近开发经常用到,所以就干脆封装一个这样的 Button 让图片和字体都垂直居中,重写layoutSubviews方法,来实现就可以,至于 layoutSubviews 方法什 ...

  10. protobuffer php使用

    protobuffer是google推出的一种数据传的方式,具体压缩,体积小的特点 protobuffer本身不支持php,若要把.proto文件转化为php支持的文件,需要使用第三方的程序 alle ...