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. 使用redis实现【统计文章阅读量】及【最热文章】功能

    1.视图函数 # 不需要登录装饰器,匿名用户也可访问def article_detail(request, id, slug): # print(slug,id) article = get_obje ...

  2. WebAPI的AuthorizeAttribute扩展类中获取POST提交的数据

    在WEBAPI中,AuthorizeAttribute类重写时,如何获取post数据是个难题,网上找资料也不好使,只能自己研究,通过研究发现,WEBAPI给了我们获取POST数据的可能,下面介绍一下: ...

  3. JAVA 从头开始<二>

    一.JAVA_HOME 1.环境变量如果经常变更,就要经常操作到Path,可能会一不小心把什么东西给删了 2.最好新建一个环境变量 3.如果使用新环境变量 ①原来的写法 ②现在的写法 新建环境变量JA ...

  4. js url 参数 转换成 json 对象数据

    some=params&over=here => {"some":"params","over":"here&quo ...

  5. ORM-Dapper快速学习

    轻量级ORM框架——第一篇:Dapper快速学习 转载地址:http://www.cnblogs.com/huangxincheng/p/5828470.html  我们都知道ORM全称叫做Objec ...

  6. Unreal Open Day游记

    前几天去参加了Unreal Open Day,周四早上从北京出发,坐地铁跟徐导,呵呵,simon他们汇合后,打车去了北京南站.一路上有小雨,不禁让人多少有点担心堵车,好在一路顺利.由于还没有一台较牛的 ...

  7. Docker容器的自动化监控实现

    本文由  网易云 发布. 近年来容器技术不断成熟并得到应用.Docker作为容器技术的一个代表,目前也在快速发展中,基于 Docker的各种应用也正在普及,与此同时 Docker对传统的运维体系也带来 ...

  8. 基于Spring MVC的web应用随应用启动而加载

    写个类实现org.springframework.context.ApplicationContextAware接口即可. 但是如下的程序会在启动时加载两次: @Controller public c ...

  9. day 104 luffy项目第二天

    一.前端配置 二.后端配置 一.前端配置 app.vue 二 . 后端配置 model模型配置 迁移数据 序列化 views.py文件配置 url路由 配置中间件解决跨域问题 重新设计下 model模 ...

  10. 自定义控件和View

    一.自定义控件 MotionEvent.ACTION_UP:抬起 MotionEvent.ACTION_DOWN: 按下 MotionEvent.ACTION_POINTER_UP: MotionEv ...