ionic2/3实战-自定义添加/预览图片组件

效果展示

前言

  • app有许多页面需要添加图片并实现预览功能.所以有必要封装一个公共的组件去调用
  • 由于代码比较多.不便贴出来.所以这里介绍一下大致结构.自己去github上看完整代码.

简书上贴出的代码都有可能改动,请以github上为准

准备

  1. 插件准备
    camera插--拍照获得照片
    Image Picker--用于从相册多选照片
  • 认识Swiper3--用于实现图片预览
  • ionic版本最低为3.0

核心代码

  • select-pic.ts单击图片放大看红色标注

  • viewer-pic.ts

使用

  • 如果你的app也分了多个Module,在使用前需要把导入Module.


  • 调用组件


最后

angular自定义组件就是学会使用@input()@output().本文也演示了自定义双向数据绑定的方法

@Input() name;
@Output() nameChange;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容