模块UIPhotoViewer
文档连接:https://docs.apicloud.com/Client-API/Func-Ext/UIPhotoViewer
概述UIPhotoViewer 是一个图片浏览器,是photoBrowser模块的升级版,支持gif图的浏览,支持单张、多张图片查看的功能,可放大缩小图片(android,gif暂不支持缩放),支持本地和网络图片资源。若是网络图片资源则会被缓存到本地,缓存到本地上的资源可以通过 clearCache 接口手动清除。同时本模块支持横竖屏显示,在本app支持横竖屏的情况下,本模块底层会自动监听当前设备的位置状态,自动适配横竖屏以展示图片。使用此模块开发者看实现炫酷的图片浏览器。 模块使用攻略 开发者使用此模块时可以用 frame 的形式打开并添加到主窗口上,该 frame 不可设置位置和大小,其宽高默认和当前设备屏幕的宽高相同。模块打开后可再 open 一个自定义的 frame 贴在本模块上,从而实现自定义图片浏览器样式和功能。需要适配横竖屏时,开发者可通过api对象监听当前设备的位置状态,以改变自己自定义的 frame 的横竖屏展示,而图片的展示模块内部会自动适配横竖屏,最终实现了整个浏览器的横竖屏配置。在本模块的 open 接口内可以获取图片的下载状态,通过 getImage 接口获取目标图片在本地的绝对路径,以实现保存到系统相册的功能。详情请参考模块接口参数说明。 api调用: execScript 或者 sendEvent 来进行 夸frame 操作实现 注意:android编译说明 运行截图 (帖子最后有大图)
主要代码 (两个frame页面)
主页面
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
- <title>title</title>
- <link rel="stylesheet" type="text/css" href="../css/api.css" />
- <style>
- body {}
- </style>
- </head>
- <body>
- </body>
- <script type="text/javascript" src="../script/api.js"></script>
- <script type="text/javascript">
- var UIPhotoViewer = null;
- apiready = function() {
- UIPhotoViewer = api.require('UIPhotoViewer');
- setTimeout(function() {
- openP();
- }, 1000);
- };
- function getIndexU() {
- UIPhotoViewer.getIndex(function(ret, err) {
- if (ret) {
- alert( '当前选中为第 ' + (ret.index + 1) + ' 张');
- } else {
- alert(JSON.stringify(err));
- }
- });
- }
- function closeView() {
- UIPhotoViewer.close();
- }
- function openP() {
- UIPhotoViewer.open({
- images: [
- 'http://img1.imgtn**.**/it/u=3962320828,1701933979&fm=26&gp=0.jpg',
- 'http://img0.imgtn**.**/it/u=2943994938,4115220466&fm=26&gp=0.jpg',
- 'http://img2.imgtn**.**/it/u=4200942165,215200833&fm=26&gp=0.jpg',
- 'http://img4.imgtn**.**/it/u=4058349123,3836499281&fm=26&gp=0.jpg',
- 'http://img0.imgtn**.**/it/u=4137105188,1979966924&fm=26&gp=0.jpg',
- 'https://community.apicloud.com/bbs/data/attachment/forum/201912/25/214216rsas73lal6p42nim.gif'
- ],
- placeholderImg: 'widget://image/dog.png',
- bgColor: '#000'
- }, function(ret, err) {
- if (ret) {
- if (ret.eventType == 'change') {
- api.sendEvent({
- name: 'myEvent',
- extra: {
- key1: ret.index + 1,
- }
- });
- }
- } else {
- alert(JSON.stringify(err));
- }
- });
- setTimeout(function() {
- api.openFrame({
- name: 'photoView_frame',
- url: './photoView_frame.html',
- rect: {
- x: 0,
- y: 0,
- w: 'auto',
- h: api.safeArea.top + 60
- },
- pageParam: {
- name: 'test'
- },
- bounces: false,
- bgColor: 'rgba(0,0,0,0)',
- vScrollBarEnabled: true,
- hScrollBarEnabled: true
- });
- }, 800);
- }
- </script>
- </html>
复制代码 header frame
|