|
本帖最后由 Mr.ZhouHeng 于 2019-6-27 09:45 编辑
模块文档地址:https://docs.apicloud.com/Client-API/Func-Ext/photoBrowser
photoBrowser 是一个图片浏览器,支持单张、多张图片查看的功能,可放大缩小图片,支持本地和网络图片资源。若是网络图片资源则会被缓存到本地,缓存到本地上的资源可以通过 clearCache 接口手动清除。同时本模块支持横竖屏显示,在本app支持横竖屏的情况下,本模块底层会自动监听当前设备的位置状态,自动适配横竖屏以展示图片。使用此模块开发者看实现炫酷的图片浏览器。
其实模块这块已经重点说明这个:模块使用攻略
开发者使用此模块时可以用 frame 的形式打开并添加到主窗口上,该 frame 不可设置位置和大小,其宽高默认和当前设备屏幕的宽高相同。
模块打开后可再 open 一个自定义的 frame 贴在本模块上, 从而实现自定义图片浏览器样式和功能。
需要适配横竖屏时,开发者可通过api对象监听当前设备的位置状态,以改变自己自定义的 frame 的横竖屏展示,而图片的展示模块内部会自动适配横竖屏,最终实现了整个浏览器的横竖屏配置。
在本模块的 open 接口内可以获取图片的下载状态,通过 getImage 接口获取目标图片在本地的绝对路径,以实现保存到系统相册的功能。详情请参考模块接口参数说明。
有没有发现,此模块头部win打开之后,在打开模块会把头部遮盖掉?其实文档已经说明模块打开后可再 open 一个自定义的 frame 贴在本模块上,
比较难实现win头部显示出 1/5进度的问题?
此次模块demo重点讲解一下实现这个功能的小技巧;
整个app的模块 demo结构示意图:
重点代码
1讲解:
点击图片传值打开浏览器模块的数值定义:
- fnOpenImggroup: function(num, index, sum, Img) {
- var Imgs = [];//定义传入模块需要的图片数组格式
- for (var i = 0; i < Img.length; i++) {
- Imgs.push(Img[i].img)
- }
- api.openWin({
- name: 'photobrowser',
- url: './photobrowser.html',
- pageParam: {
- num: num,//类型选择显示关键字段
- Indexnum: index,//图片点击了第几个
- Sum: sum,//图片的总数
- DynamicImg: Imgs,//传入模块需要的图片数组
- ImgName: Img//传入图片跟文本的数组 这块类型2需要
- },
- slidBackEnabled: false
- });
- }
复制代码
2讲解:
如何把传过的值实现在模块里面:
- apiready = function() {
- fnInit();
- };
- var photoBrowser;
- function fnInit() {
- photoBrowser = api.require('photoBrowser');
- photoBrowser.open({
- images: api.pageParam.DynamicImg,//显示传过来的图片数组
- placeholderImg: 'widget://res/img/apicloud.png',
- bgColor: '#000',
- activeIndex: api.pageParam.Indexnum//显示点击的是第几张
- }, function(ret, err) {
- if (ret && ret.eventType === "change") {
- //滑动图片动态显示是第几张图片使用execScript触发photobrowser_frm页面的函数改动图片页数
- api.execScript({
- frameName: 'photobrowser_frm',
- script: 'fnNum(' + ret.index + ');'
- });
- }
- });
- setTimeout(function() {//延迟打开头部
- if(api.pageParam.num===1){//当选择是进度跟文本显示使用此打开
- api.openFrame({
- name: 'photobrowser_frm',
- url: './photobrowser_frm.html',
- rect: {
- marginLeft: 0,
- h:100,
- marginBottom: api.safeArea.bottom,
- marginRight: 0,
- },
- pageParam: {
- Indexnum: api.pageParam.Indexnum,
- Sum: api.pageParam.Sum,
- ImgName: api.pageParam.ImgName,
- num:api.pageParam.num
- }
- });
- return;
- }
- api.openFrame({
- name: 'photobrowser_frm',
- url: './photobrowser_frm.html',
- rect: {
- x: 0,
- y: 0,
- w: 'auto',
- h: 44 + api.safeArea.top,
- },
- pageParam: {
- Indexnum: api.pageParam.Indexnum,
- Sum: api.pageParam.Sum,
- ImgName: api.pageParam.ImgName,
- num:api.pageParam.num
- }
- });
- }, 100)
- }
复制代码
图片浏览列表选择win页面
图片浏览样式1
图片浏览样式2
图片浏览样式3
|
本帖子中包含更多资源 您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|