Ionic3 UI组件之 Gallery Modal
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的更多相关文章
- 第31讲 UI组件之 Gallery画廊控件
第31讲 UI组件之 Gallery画廊控件 1.Gallery的简介 Gallery(画廊)是一个锁定中心条目并且拥有水平滚动列表的视图,一般用来浏览图片,并且可以响应事件显示信息.Gallery只 ...
- Ionic3 UI组件之 ImagePicker
ImagePicker插件实现设备上的多个图像选择的功能. 组件特性: 统一选择界面,避免不同设备选择界面不一样的问题: 支持多选,并且可以设置最多选择的张数: 选择数量超出设置时会提示: Camer ...
- Ionic3 UI组件之 PhotoViewer
PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...
- Ionic3 UI组件之 ImageLoader
ImageLoader:通过后台线程加载图片(异步)并缓存.类似于Glide或者Picasso. 组件特性: 后台线程下载图片,下载速度更快,不使用webview的资源: 缓存图像.图像将在您下次显示 ...
- Ionic3 UI组件之 ImageViewer
组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...
- Ionic3 UI组件之 autocomplete
无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...
- 【共享单车】—— React后台管理系统开发手记:UI菜单各个组件使用(Andt UI组件)
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- AngularJs的UI组件ui-Bootstrap分享(十)——Model
Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的 ...
- 第29讲 UI组件之 ListView与 BaseAdapter,SimpleAdapter
第29讲 UI组件之 ListView与 BaseAdapter,SimpleAdapter 1.BaseAdapter BaseAdapter是Android应用程序中经常用到的基础数据适配器,它的 ...
随机推荐
- 仿建设银行APP首页效果
仿建设银行APP首页效果 下载地址: http://pan.baidu.com/s/1eRMYEzC 下载后需要解压,解压密码联系:390980233 收费88元 HTML+JS实现,下载即可试用. ...
- 二叉树(Binary Tree)相关算法的实现
写在前面: 二叉树是比较简单的一种数据结构,理解并熟练掌握其相关算法对于复杂数据结构的学习大有裨益 一.二叉树的创建 [不喜欢理论的点我跳过>>] 所谓的创建二叉树,其实就是让计算机去存储 ...
- Android开发基于百度地图的乘车助手
写在前面: 出去玩免不了挤公交.等地铁,不知道乘车方案当然不行,用官方APP吧,缺点一大堆,手机浏览器在线查的话既慢又麻烦...为了解决这些问题,我们来做一个简版的出行助手,嘛嘛再也不用担心我会迷路了 ...
- 关于linq的几个小例子
private void button1_Click(object sender, EventArgs e) { ] { ,,,,,,}; var result0 = from num in numb ...
- ASP.NET Core 2 学习笔记(四)依赖注入
ASP.NET Core使用了大量的依赖注入(Dependency Injection, DI),把控制反转(Inversion Of Control, IoC)运用的相当巧妙.DI可算是ASP.NE ...
- C# Lock锁(个人随记)
先看看为什么要用锁 需求:多线程处理值的加减 static int NoLockData = 0; public static void NoLockNormalTest(int threadIn ...
- window10下Docker安装
首先window版本必须是10,如果是win7那么安装方法有所不同,win10是官方支持安装的.笔者安装的是Community社区版,版本信息如下: 1.去docker官网下载win10安装包: ht ...
- python 中 使用sys模块 获取运行脚本时在命令行输入的参数
在python项目的开发的过程中, 经常需要运行各种python脚本, 有时候还需要根据不同的使用情况输入不同的参数, 如果每次都去编辑一下脚本那就太麻烦,太耗费时间了, 这时就可以使用Python自 ...
- LayUI把表格中的时间戳改成格式化的时间
- linux下程序编译出错解决方法
一 *** No rule to make target 'subscribe_pkg/CMakeFiles/subscribe_pkg_node.dir/build'. 停止.CMakeFiles/ ...