NewsNing
NewsNing
  • 发布:2016-08-03 11:06
  • 更新:2016-08-03 11:06
  • 阅读:12564

分享mui.previewimage.js图片预览的经验

分类:MUI

我相信许多人在实际开发中会遇到这种问题

如图,这是一个子页面,需求是点击图片预览大图。
ok,大家把mui的图片预览拿过来用

纳尼?图片是预览大图出来了,那为虾米下面的tab导航怎么还在?不是全屏的么?

我在此解释一下,因为当初这4个页面是作为父页的子页面的,设置的样式 是 bottom:'51px'

sogo,所以子页面的大小是 屏幕高度-51px,这样图片预览全屏认的是子页面的全屏,所以tab导航还在啦

该如何解决呢????

打开预览的时候,当前页面必须全屏显示,关闭预览的时候就要回到之前的样子。

然而并没有这个功能,没关系,

我们来查看mui.previewimage.js的源码,会发现有两个比较明显意图的方法名:proto.open 和 proto.close
这就是打开和关闭图片预览的相应方法拉!各位看官现在应该也知道我要做什么坏事了吧?没错

嘿嘿,在插件初始化的时候,传入两个函数,fun1,fun2,当然大家可以自行命名,在这,我用fun1为打开预览时的回调函数,fun2为关闭预览的回调函数

然后在open和close的事件中 ,调用我们自己传入的fun1fun2


ctrl+s保存一下js文件,ok,现在去试用一下。

在这里我分别为打开和关闭设置了2个回调函数,打开预览时,窗口全屏,关闭预览时窗口回到之前的样子。

大功告成,不要吐槽我的fun1 fun2。

6 关注 分享
Trust lhyh 赵梦欢 anxiang 小农 5***@qq.com

要回复文章请先登录注册

c***@qq.com

c***@qq.com

IOS:
if(plus.os.ios){
plus.webview.getLaunchWebview().evalJS("plus.navigator.setFullscreen(true);");
}else{
plus.navigator.setFullscreen(true);
}
2017-10-20 21:17
所谓

所谓

感谢楼主
open
//设定程序为全屏
if(!plus.navigator.isFullscreen()){
plus.navigator.setFullscreen(true);
}

close
//设定程序非全屏
if(plus.navigator.isFullscreen()){
plus.navigator.setFullscreen(false);
}
2017-08-21 11:24
5***@qq.com

5***@qq.com

马克
2017-06-06 17:38
NewsNing

NewsNing (作者)

回复 T***@outlook.com :
ios上要该父窗体的样式
2016-09-14 11:36
T***@outlook.com

T***@outlook.com

IOS的上下还是显示的
2016-08-29 11:18