Ionic3 UI組件之 ImageViewer


 組件特性:

  • 輕觸圖片可全屏查看
  • 手勢上下滑動可關閉全屏查看
  • 點擊導航箭頭可關閉視圖
  • 雙擊查看全圖,並可放大

參考地址: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" />

4)在使用此組件的過程中,發現存在問題,如下所示:

 5)猜測與自己的 ionic framework 版本有關系,修改項目中的package.json中 ionic-angular 版本號為: 3.3.0,

npm update,重新運行項目就OK了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM