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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
Jul 26 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
使用JS中的exec()方法构造正则表达式验证
Aug 01 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
node网页分段渲染详解
Sep 05 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 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 Socket 编程
2010/04/09 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php加密解密字符串示例
2016/10/13 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
2014/08/10 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
Python和C/C++交互的几种方法总结
2017/05/11 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
会话Bean的种类
2013/11/07 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
高中运动会广播稿
2014/09/16 职场文书
5.12护士节活动总结
2015/02/10 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书