Arsenal
Arsenal
  • 发布:2015-08-16 19:04
  • 更新:2018-06-02 22:12
  • 阅读:8566

Hello MUI的webview选项卡示例,安卓弹出键盘会把底部选项卡撑上来

分类:MUI

如题。

代码是2015年8月15日最新Hello Mui。手机是红米2A,安卓4.4。

在webview选项卡这个页面,加上一个input输入框。点击输入框弹出的键盘会把底部的选项卡撑上来。

IOS上没有这个问题。

截图如下:

原因似乎是因为底部的选项卡是绝对定位,bottom为0,键盘弹出之后,整个屏幕的高度被缩小,导致被撑起来。

目前有个临时解决方案:

把绝对定位的元素由bottom改为top,值需要根据设备动态计算。

2015-08-16 19:04 1 条评论 负责人:无 分享
已邀请:
王者地带

王者地带 - 5+混合APP开发教程网 | http://www.html5-app.com | 咨询QQ: 2564034335

看到有人已经解决了 http://ask.dcloud.net.cn/article/847

蔡繁荣

蔡繁荣 - 发表是最好的记忆

也可以隐藏

window.addEventListener('resize', function() {  
    document.getElementById("tabbar").style.display = document.body.clientHeight <= 400 ? 'none' : 'block';  
}, false);
  • 迷离的IT民工

    输入时影藏了,但是在取消输入的时候 ,没有显示呀?

    2016-05-13 12:17

  • 754459699@qq.com

    回复 迷离的IT民工:请问这个问题您解决了吗

    2016-08-08 09:51

  • 花开

    这个id “tabbar” 是指哪一层的id呢?请指教

    2017-02-03 09:57

  • gadget2k

    同样的问题,隐藏倒是隐藏了,取消输入,明明高度应该变回去了,结果还是没有显示出来

    2017-02-16 22:01

  • 1359378025@qq.com

    请问您是如何获取的tabbar呢?是manifest文件中设置的id吗?我一直都回去不了

    2018-11-27 16:14

36638259@qq.com

36638259@qq.com

我 也碰到这个问题,不知道有没有大神可以解决的

  • 兮颜A

    你的这个问题解决了吗

    2018-04-19 18:07

36638259@qq.com

36638259@qq.com

难道大家都是做IOS用的吗?

36638259@qq.com

36638259@qq.com

我来一直顶,看看有没有人可以给点参考意见的;)

36638259@qq.com

36638259@qq.com

就没有人碰到这种 问题的吗?

Native_O

Native_O

顶啊 今天也遇到了这种问题,百度了很多方法也无果!

Salazar

Salazar

亲测可用:如果是单页面出现的问题,可以使用
mui.plusReady(function() {
//设置bottom绝对位置
document.getElementById('bottomx').style.top = (plus.display.resolutionHeight - 50) + "px";
});

  • 兮颜A

    用这个方法点输入框时,底部不见了,要怎么解决啊

    2018-04-19 18:08

18771149353@163.com

18771149353@163.com

这个已经很好的解决了这个问题:
http://ask.dcloud.net.cn/article/12583

  • Native_O

    根本就没有解决,而且闪屏厉害,关掉输入法 连底部菜单栏都不见了

    2017-06-19 16:55

  • 18771149353@163.com

    回复 Native_O:我这边测试是可以的,能具体说下你的问题么?

    2017-06-19 20:54

  • Native_O

    @18771149353@163.com 获取焦点的确隐藏了底部导航栏,但是失去焦点时候 底部的导航栏也不见了,是永远的不见了

    2017-06-20 16:43

  • 18771149353@163.com

    回复 Native_O:能上一下代码么,我这边测试确实是没有问题的,你修改子页面webview高度的时候,子页面的webview高度应该是父页面的webview高度减去导航栏的高度。

    2017-06-20 18:03

  • 王者地带

           我是用这个可以,  
    var heigh=plus.display.resolutionHeight; 第一次打开页面记录屏幕高,
    window.addEventListener('resize', function()
    {
    //当打开输入法,屏幕会被压缩,此时的高比原因的高很多
    //var top=document.querySelector(".footers").currentStyle.bottom;
    if(heigh==plus.display.resolutionHeight)
    {
    document.getElementById("footer").style.display='block';
    }
    else
    {
    document.getElementById("footer").style.display='none';
    }

    }, false);

    2017-06-27 14:00

1245343496@qq.com

1245343496@qq.com

加一个:z-index: -1

  • 老哥教教我

    不错,你怎么想到的,其实我直接规避,不在有底部选项卡页面,弹出键盘!

    2018-03-28 17:23

  • 1359378025@qq.com

    请问这个在哪里加呢?

    2018-11-27 15:46

1594774717@qq.com

1594774717@qq.com

mui.plusReady(function() {
var height = (plus.display.resolutionHeight - 95) + "px"
subpages = ['1.html', '2.html', '3.html', '4.html'];
var subpage_style = {
top: '45px',
bottom: '51px',
height: height
};
})
这个可以

1594774717@qq.com

1594774717@qq.com

mui.plusReady(function() {
var height = (plus.display.resolutionHeight - 95) + "px"
subpages = ['1.html', '2.html', '3.html', '4.html'];
var subpage_style = {
top: '45px',
bottom: '51px',
height: height
};
})
这个可以

dlfming@gmail.com

dlfming@gmail.com

document.getElementById('bottomx').style.top = (plus.display.resolutionHeight - 50) + "px";
//当前窗口对象,即父窗口;
var self = plus.webview.currentWebview();

            //要切换的子页面窗口组  
            var subpages = [  
            ];   

            //子页面样式  
            var subStyles = {  
                top: '45px',  
                height: (plus.display.resolutionHeight-95) + "px",  
            };

该问题目前已经被锁定, 无法添加新回复