UIPhotoViewer

来自于:APICloud官方 立即使用

open close hide show setIndex getIndex getImage setImage appendImage deleteImage clearCache

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述**

UIPhotoViewer 是一个图片浏览器,是photoBrowser模块的升级版,支持gif图的浏览,支持单张、多张图片查看的功能,可放大缩小图片(android,gif暂不支持缩放),支持本地和网络图片资源。若是网络图片资源则会被缓存到本地,缓存到本地上的资源可以通过 clearCache 接口手动清除。同时本模块支持横竖屏显示,在本app支持横竖屏的情况下,本模块底层会自动监听当前设备的位置状态,自动适配横竖屏以展示图片。使用此模块开发者看实现炫酷的图片浏览器。

模块使用攻略

开发者使用此模块时可以用 frame 的形式打开并添加到主窗口上,该 frame 不可设置位置和大小,其宽高默认和当前设备屏幕的宽高相同。模块打开后可再 open 一个自定义的 frame 贴在本模块上,从而实现自定义图片浏览器样式和功能。需要适配横竖屏时,开发者可通过api对象监听当前设备的位置状态,以改变自己自定义的 frame 的横竖屏展示,而图片的展示模块内部会自动适配横竖屏,最终实现了整个浏览器的横竖屏配置。在本模块的 open 接口内可以获取图片的下载状态,通过 getImage 接口获取目标图片在本地的绝对路径,以实现保存到系统相册的功能。详情请参考模块接口参数说明。

UIPhotoViewer - 图1

android编译说明

  • 使用升级环境编译
  • 最低版本支持到4.0及4.0以上

模块接口

open

打开图片浏览器

open({params}, callback(ret))

params

images:

  • 类型:数组
  • 描述:要读取的图片路径组成的数组,图片路径支持 fs://、http:// 协议

activeIndex:

  • 类型:数字
  • 描述:(可选项)当前要显示的图片在图片路径数组中的索引
  • 默认值:0

placeholderImg:

  • 类型:字符串
  • 描述:(可选项)当加载网络图片时显示的占位图路径,要求本地图片路径(widget://、fs://)

bgColor:

  • 类型:字符串
  • 描述:(可选项)图片浏览器背景色,支持 rgb、rgba、#
  • 默认:#000

zoomEnabled:

  • 类型:布尔
  • 描述:(可选项)是否打开缩放手势识别功能(随手势放大缩小图片)
  • 默认:true

mode:

  • 类型:数字
  • 描述:(可选项)图片的现实模式;1:为图片原本大小 2:图片宽度等比例放大到宽等于屏幕款;android不支持此参数
  • 默认:1

gestureClose:

  • 类型:布尔类型
  • 描述:(可选项)手势关闭,上划或下划关闭控件
  • 默认:false

atime:

  • 类型:数字
  • 描述:(可选项)打开关闭动画的执行时间,传0无动画
  • 默认:0

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'show', //字符串类型;交互事件类型,取值范围如下:
  3. //show: 打开浏览器并显示
  4. //change: 用户切换图片
  5. //click: 用户单击图片浏览器
  6. //loadImgSuccess:网络图片下载成功的回调事件
  7. //loadImgFail: 网络图片下载失败的回调事件
  8. //longPress: 用户长按图片事件
  9. //panGesture: 用户手指移动
  10. index: 2, //数字类型; 当前图片在图片路径数组中的索引
  11. point:{ //json对象;手指所在位置距离手指按下位置的坐标,实时返回,panGesture事件返回
  12. x:0, //数字类型;x坐标
  13. y:0 //数字类型;y坐标
  14. }
  15. }

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.open({
  3. images: [
  4. 'fs://img/image1.png',
  5. 'fs://img/encryption.png'
  6. ],
  7. placeholderImg: 'widget://res/img/apicloud.png',
  8. bgColor: '#000'
  9. }, function(ret, err) {
  10. if (ret) {
  11. alert(JSON.stringify(ret));
  12. } else {
  13. alert(JSON.stringify(err));
  14. }
  15. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭图片浏览器

close()

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.close();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏图片浏览器

hide()

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.hide();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示图片浏览器

show()

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.show();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setIndex

设置当前显示图片

setIndex({params})

params

index:

  • 类型:数字
  • 描述:(可选项)当前要显示的图片在图片路径数组中的索引
  • 默认值:0

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.setIndex({
  3. index: 0
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getIndex

获取当前图片在图片路径数组内的索引

getIndex(callback(ret))

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. index: 2 //数字类型;当前图片在图片路径数组中的索引
  3. }

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.getIndex(function(ret, err) {
  3. if (ret) {
  4. alert(JSON.stringify(ret));
  5. } else {
  6. alert(JSON.stringify(err));
  7. }
  8. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

getImage

获取指定图片在本地的绝对路径

getImage({params}, callback(ret))

params

index:

  • 类型:数字
  • 描述:指定图片在图片数组中的索引
  • 默认:当前图片在图片数组中的索引

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. path: ‘’ //字符串类型;获取的绝对
  3. }

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.getImage({
  3. index: 2
  4. }, function(ret, err) {
  5. if (ret) {
  6. alert(JSON.stringify(ret));
  7. } else {
  8. alert(JSON.stringify(err));
  9. }
  10. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setImage

设置指定位置的图片,若设置的是网络图片加载成功或失败会给 open 接口回调该加载事件

setImage({params})

params

index:

  • 类型:数字
  • 描述:(可选项)指定图片在图片数组中的索引
  • 默认:当前图片在图片数组中的索引

image:

  • 类型:字符串
  • 描述:要设置的图片路径,支持本地和网络路径(fs://、http://)

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.setImage({
  3. index: 2,
  4. image: '//docs.apicloud.com/img/docImage/imageBrowser.jpg'
  5. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

appendImage

往已打开的图片浏览器里添加图片(拼接在最后)

appendImage({params})

params

images:

  • 类型:数组
  • 描述:要拼接的图片路径组成的数组,图片路径支持 fs://、http:// 协议

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.appendImage({
  3. images: [
  4. 'fs://img/image1.png',
  5. 'fs://img/encryption.png'
  6. ]
  7. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

deleteImage

删除指定位置的图片

deleteImage({params})

params

index:

  • 类型:数字
  • 描述:(可选项)删除的指定图片在图片数组中的索引
  • 默认:当前图片在图片数组中的索引

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.deleteImage({
  3. index: 2
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

clearCache

清除缓存到本地的网络图片,本接口只清除本模块缓存的数据,若要清除本 app 缓存的所有数据则调用 api.clearCache

clearCache()

示例代码

  1. var UIPhotoViewer = api.require('UIPhotoViewer');
  2. UIPhotoViewer.clearCache();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本