Ionic2实战-图片点击缩放功能开发
原文出处:https://blog.csdn.net/wei11556/article/details/62037428
前言
作为一个功能完备的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、然后就可以开始愉快的使用了,具体的使用方法有两种
<img src="IMAGE_URL" imageViewer />
或者
<img src="IMAGE_URL" imageViewer="OTHER_IMAGE_URL" />
我建议在实际使用的时候用后一种,因为缩略图和可缩放的大图实际上分辨率是不一样的,默认src里面可以写一个小尺寸的地址,imageViewer里面写一个大尺寸的地址,这样可以很好地提高效率。
最后
另外还有一个值得注意的问题是,应用了该插件以后发现在iOS系统上图片通常在被点击一两秒以后才能被打开,这是因为iOS系统的点击延迟所致,有兴趣的话可以去百度,解决办法就是在需要点击的元素上添加tappable属性,比如:
<img tappable padding imageViewer="{{productPrice.reportImage}}" src="{{productPrice.reportImage}}?imageView/2/w/400">
可以有效的解决该问题。
好啦,今天的分享就到此为止,大家一周开心,有问题留言。
作者:逃离火星
链接:https://www.jianshu.com/p/454a0a16ce54
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。