• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > 分享mui.previewimage.js图片预览的经验

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

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含mui.previewimage,mui.previewimage.js,previewimage,wx.previewimage,previewimage.js等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 我相信许多人在实际开发中会遇到这种问题

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

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

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

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

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

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

该如何解决呢????

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

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

我们来查看mui.previewimage.js的源码,会发现有两个比较明显意图的方法名:proto.open 和 proto.close
这就是打开和关闭图片预览的相应方法拉!各位看官现在应该也知道我要做什么坏事了吧?没错
分享mui.previewimage.js图片预览的经验
嘿嘿,在插件初始化的时候,传入两个函数,fun1,fun2,当然大家可以自行命名,在这,我用fun1为打开预览时的回调函数,fun2为关闭预览的回调函数
分享mui.previewimage.js图片预览的经验

然后在open和close的事件中 ,调用我们自己传入的fun1fun2
分享mui.previewimage.js图片预览的经验
分享mui.previewimage.js图片预览的经验
ctrl+s保存一下js文件,ok,现在去试用一下。
分享mui.previewimage.js图片预览的经验
在这里我分别为打开和关闭设置了2个回调函数,打开预览时,窗口全屏,关闭预览时窗口回到之前的样子。

您可能想查找下面的文章:

  • MUI 使用native.js修改系统壁纸(Android)
  • 分享mui.previewimage.js图片预览的经验

相关文章

  • 2017-05-31Hbuilder MUI 在手机端长按文字复制提示
  • 2017-05-31Hbuilder 常用快捷键汇总
  • 2017-05-31mui iOS中使用video标签播放视频,禁止自动全屏的方案
  • 2017-05-31在mui中遇到的内容覆盖导航栏的问题
  • 2017-05-31webview启动速度优化及事件顺序解析
  • 2017-05-31如何用hbuilder开发微信公众号
  • 2017-05-31HBuilder百度地图显示不出来怎么解决?
  • 2017-05-31mui.plusready和mui.ready 随先随后?
  • 2017-05-31HBuilder制作的APP怎么连接SQLServer数据库!
  • 2017-05-31HBuilder mui即时通信、im问题汇总。环信、融云怎么集成

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HBuilder制作的APP怎么连接SQLServer数据库!
    • chrome://inspect调试html页面空白,DOM无法加载的解决方案
    • Native.js开启关闭蓝牙-Android平台
    • Hbuilder MUI 多端发布开发指南
    • HBuilder mui 手势事件
    • Mui WebApp页面 绝对定位 软键盘弹出时顶起底部按钮问题
    • HBuilder mui 创建子页面
    • mui数百精选案例分享
    • MUI iOS切换到后台支持音乐播放功能
    • HBuilder MUI 为textarea添加语音输入和清除的功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有