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应用程序中经常用到的基础数据适配器,它的 ...
随机推荐
- ionic4 ios调试打包
在ionic3的时候打包上架过ios的版本,等到今天,差不多一年左右过去.做了个ionic4的app要测试打包的时候,才发现以前的东西忘的差不多了.不得不从头再来一遍,所幸的是这次看见了很多好的文章, ...
- cmd命令使用笔记
使用资源管理器打开当前路径 explorer %cd%
- phpmailer SMTP Error: Could not connect to SMTP host. 错误解决
今天发邮件遇到了这么一个问题:SMTP Error: Could not connect to SMTP host.在网上找了好多,都不管用.在这里我要提醒大家下 1.确保发送者邮箱密码正确,代码编写 ...
- Svn和jekins的使用
首先是svn的安装, 在安装svn的服务端时,需要注意选择第二项,这样才能在idea中使用svn, 然后就是在idaa中配置svn插件. 插件的使用 从svn库中检出项目 然后在这个地址中填入你需要导 ...
- 内置装饰器二:@property
property 装饰器的作用 property 装饰器将方法包装成属性,将私有属性公有化,此属性只能被读取.相当于实现get方法的对象 class People: def __init__(self ...
- Bootstrap框架(二)
day58 巨幕 这是一个轻量.灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容. Hello, world! This is a simple hero unit, a simple ju ...
- 内核格式化(C++)
参考<C++ Primer Plus>P788 iostream族支持 程序 与 终端 之间的I/O fstream族支持 程序 与 文件 之间的I/O sstream族支持 程序 与 s ...
- hdoj1072 Nightmare(bfs)
题目大意: 在迷宫中有一个炸弹,过六个单位时间就会爆炸,要你求一个起点到迷宫的终点的最短距离,迷宫中有时间重置器,当你走到这个格子,炸弹的爆炸时间重新置为0,迷宫中标识为墙壁的格子不能走,到达任意一个 ...
- php 删除二维数组中某个key值
/** * 根据key删除数组中指定元素 * @param array $arr 数组 * @param string/int $key 键(key) * @return array */ priva ...
- 使用win10自带邮件应用发送文件
之前的电脑装过邮件客户端,想发送文件给别人时,只需要“右键文件——发送到邮件”,就能把文件作为附件发送给对方.新电脑win10系统自带邮件客户端,所以就想直接用.但是右键发送到邮件没有关联上,用不了. ...