码迷,mamicode.com
首页 > 其他好文 > 详细

Ionic2 UI组件之 ImageViewer

时间:2017-06-03 12:44:11      阅读:676      评论:0      收藏:0      [点我收藏+]

标签:install   port   git   点击   hub   nbsp   npm   from   双击   

组件特性:

  • 轻触图片可全屏查看
  • 手势上下滑动可关闭全屏查看
  • 点击导航箭头可关闭视图
  • 双击查看全图,并可放大

参考地址:https://github.com/Riron/ionic-img-viewer

==============================================================

1)npm install --save ionic-img-viewer

2)在app.module.ts文件中增加:import { IonicImageViewerModule } from ‘ionic-img-viewer‘;

并且在imports: [] 中增加IonicImageViewerModule;

3)在使用图片的地方增加imageViewer属性,比如:<img src="IMAGE_URL" imageViewer />

展示缩略图:<img src="IMAGE_URL" imageViewer="OTHER_IMAGE_URL" />

 

ps:未完待续,此组件在ionic v2.2.0版本适用,升级到目前的v3.3.0会存在问题。等待官方更新

 

Ionic2 UI组件之 ImageViewer

标签:install   port   git   点击   hub   nbsp   npm   from   双击   

原文地址:http://www.cnblogs.com/crazyprogrammer/p/6936602.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!