• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > MUI 解决弹出输入法时页面高度变小导致底部上浮的问题

MUI 解决弹出输入法时页面高度变小导致底部上浮的问题

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

本文主要包含mui页面跳转,mui刷新当前页面,mui页面传值,mui打开新页面,mui页面间传值等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能。查找了一下,页面变窄是不可避免的。即使是设置绝对固定也是不可以的。因为webveiw在输入法弹出时候是变化(resize)的。关于document.body.clientheght, screen.height,plus.screen.resolutionHeight的相关区别及联系请查看这

深入理解高度。获取屏幕、webview、软键盘高度
http://www.cnblogs.com/phillyx/
所以要获取屏幕的高度,通过js给一个固定的top

    class="mui-bar mui-bar-tab" id='bottomx'>
            class="mui-tab-item mui-active" href="#tabbar">
                class="mui-icon mui-icon-home">
                class="mui-tab-label">首页
            
            class="mui-tab-item" href="#tabbar-with-chat">
                class="mui-icon mui-icon-email">class="mui-badge">9
                class="mui-tab-label">消息
            
            class="mui-tab-item" href="#tabbar-with-contact">
                class="mui-icon mui-icon-contact">
                class="mui-tab-label">通讯录
            
            class="mui-tab-item" href="#tabbar-with-map">
                class="mui-icon mui-icon-gear">
                class="mui-tab-label">设置
            
        
 mui.plusReady(function() {
                //设置bottom绝对位置
                document.getElementById('bottomx').style.top = (plus.display.resolutionHeight - 50) + "px";
            });

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

  • mui几种页面跳转方式对比
  • MUI-页面传参数
  • MUI页面跳转调用原生等待框的解决方案
  • MUI页面布局(打开新页面,预加载)
  • MUI 解决弹出输入法时页面高度变小导致底部上浮的问题
  • MUI 页面传参大总结
  • MUI 模板页面实现原理及多端适配指南
  • mui使用pop-in动画,页面二次渲染的问题,求解
  • mui中几种open页面的区别

相关文章

  • 2017-05-31HBuilder 打包生成APP的时候可以生成 IOS的 Bundle ID吗?
  • 2017-05-31Hbuilder MUI 分享插件开发指南
  • 2017-05-31Hbuilder MUI 微信支付只有一个按钮(ios)
  • 2017-05-31Android硬件加速的配置与踩坑注意
  • 2017-05-31MUI图文列表每一列右侧添加收藏功能
  • 2017-05-31iOS平台-Native.js获取包名
  • 2017-05-31MUI 解决弹出输入法时页面高度变小导致底部上浮的问题
  • 2017-05-31MUI plus.share的一些心得
  • 2017-05-31mui 如何监听键盘弹出
  • 2017-05-31Hbuilder MUI 如何判断预加载是否成功

文章分类

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

最近更新的内容

    • mui.fire()触发自定义事件
    • mui+jqueryimagecroppe头像剪切功能分享
    • Hbuilder MUI积分兑换页面
    • 解决mac上用chrome调试的跨域问题
    • mui拍照、相册选择用户头像上传
    • HBuilder mui 里js动态添加数字输入框后,增加 减少按钮无效
    • mui如何根据Geolocation获得的坐标获取所在城市?
    • Hbuilder连接第3方模拟器(夜神)
    • 小米手机安装HBuilder调试基座报错Failure [INSTALL_CANCELED_BY_USER]
    • HTML5基于Canvas实现的画板涂鸦动画特效源码

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

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