Ionic3 UI组件之Gallery Modal详解


Posted in Javascript onJune 07, 2017

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

Ionic3 UI组件之Gallery Modal详解

Ionic3 UI组件之Gallery Modal详解

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

Ionic3 UI组件之Gallery Modal详解

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

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

效果如下:

Ionic3 UI组件之Gallery Modal详解Ionic3 UI组件之Gallery Modal详解

Ionic3 UI组件之Gallery Modal详解Ionic3 UI组件之Gallery Modal详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
基于iframe实现类似于ajax的页面无刷新
May 31 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 #Javascript
vue2.0 自定义日期时间过滤器
Jun 07 #Javascript
详解Node.js 命令行程序开发教程
Jun 07 #Javascript
详解vee-validate的使用个人小结
Jun 07 #Javascript
微信小程序多张图片上传功能
Jun 07 #Javascript
Vue.js对象转换实例
Jun 07 #Javascript
深入理解Angular4中的依赖注入
Jun 07 #Javascript
You might like
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP时间函数使用详解
2019/03/21 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue使用recorder.js实现录音功能
2019/11/22 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
python3中的md5加密实例
2018/05/29 Python
Python实现手势识别
2020/10/21 Python
html5摇一摇代码优化包括DeviceMotionEvent等等
2014/09/01 HTML / CSS
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
法律进学校实施方案
2014/03/15 职场文书
大学生励志演讲稿
2014/04/25 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
党支部先进事迹材料
2014/12/24 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
催款函范本大全
2015/06/24 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书