Ionic2实战-图片点击缩放功能开发

前言

作为一个功能完备的APP，难免需要显示一些图片，而现在的图片通常尺寸都特别大，需要点击放大以后才可以完全看清晰，所以就添加了图片点击缩放功能。

默认情况下，图片都是以缩略图的形式展示，文件大小也是按照缩略图的清晰度下载。当用户需要放大查看的时候则可以单击图片，会自动下载最新的大图，然后全屏显示。

实现本功能完全是依赖开源朋友们无私的贡献，使用了GitHub上开源插件ionic-img-viewer，只需要三五行代码便可以实现强大的功能。大家也可以直接去这个地址查看插件使用说明：https://github.com/Riron/ionic-img-viewer

步骤

1、在package.json文件中加入相关插件依赖，加入完记得惯例要npm install一下

"ionic-img-viewer": "2.4.0"

2、在app.module.ts文件中导入插件

import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  imports: [
    IonicImageViewerModule
  ]
})
export class AppModule {}

3、然后就可以开始愉快的使用了，具体的使用方法有两种

或者

我建议在实际使用的时候用后一种，因为缩略图和可缩放的大图实际上分辨率是不一样的，默认src里面可以写一个小尺寸的地址，imageViewer里面写一个大尺寸的地址，这样可以很好地提高效率。

最后

另外还有一个值得注意的问题是，应用了该插件以后发现在iOS系统上图片通常在被点击一两秒以后才能被打开，这是因为iOS系统的点击延迟所致，有兴趣的话可以去百度，解决办法就是在需要点击的元素上添加tappable属性，比如：

可以有效的解决该问题。

好啦，今天的分享就到此为止，大家一周开心，有问题留言。