- 发布：2017-03-28 18:09
- 更新：2017-03-31 10:09
- 阅读：1508
点击input，底部导航栏被输入法顶起来，怎么解决？求大牛解答
CJH - 我想要的，我自然会认真
两种解决方案
1.你自己设置 position: relative;然后再根据你的dom样式去更改。
2.我比较喜欢简单粗暴的一种方法，显示与隐藏。当软键盘弹出时隐藏底部banner，收回时底部显示出来。当然适场景而定。
window.onresize = function() { //当屏幕改变的时候，底部banner的显示与隐藏
var _type = window.getComputedStyle(_wechatTab).display;
if(_type == 'block') {
_wechatTab.style.display = 'none';
} else {
_wechatTab.style.display = 'block';
}
} 花开 (作者)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>index</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/iconfont.css" />
<style type="text/css">
.mui-bar{
-webkit-box-shadow: none;
box-shadow: none;
}
.mui-bar-tab {
border-top: 1px solid #d5d5d5;
box-sizing: border-box;
height: 49px!important;
}
.mui-tab-label{
line-height:12px ;
padding-top: 4px;
}
.icon-bofang{
font-size: 22px!important;
}
.mui-bar-tab .mui-tab-item {
height: 49px;
}
html,body,.mui-content {
background-color:transparent !important;
}
</style> </head>
<body style="background-color:transparent !important ;">
<div class="mui-content" style="background-color:transparent !important ;">
<nav class="mui-bar mui-bar-tab nav-bar padding-clear" style="background-color: #fff;">
<a id="defaultTab" class="mui-tab-item mui-active" href="home_new.html'">
<span class="mui-icon iconfont icon-shouye-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="find.html">
<span class="mui-icon iconfont icon-bofang"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item " href="fabu.html">
<div class="index-plus-absolute "><!--绝对定位-->
<span class="iconfont icon-jia index-fabu"></span>
</div>
</a>
<a class="mui-tab-item" href="test.html">
<span class="mui-icon iconfont icon-biji"></span>
<span class="mui-tab-label">考考</span>
</a>
<a class="mui-tab-item" href="my.html">
<span class="mui-icon iconfont icon-wode"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
</div>
<script src="js/castapp.js"></script>
<script >
ca.init();
//以下是底部导航
var arr = ['home_new.html','find.html','fabu.html','test.html','my.html'];
ca.tabBar(arr);
//控制底部选项卡显示或隐藏
var nav = ca.tagName('nav')[0];
var body = ca.tagName('body')[0];
window.addEventListener('resize', function() {
nav.style.display = plus.display.resolutionHeight <= 400 ? 'none' : 'block';
}); </script>
</body>
</html>
花开 (作者)
大神，监听屏幕的resolutionHeight，当它≤400时，底部选项卡隐藏，但是，还是会有白条占位，遮挡住了下面的内容，我把HTML，body，.mui-content的背景都强制设置成透明，可是还是不行，已经验证了那个白条就是body背景颜色，但是就是解决。
2017-03-31 10:04
花开 (作者)
下面的是我的源码，和出问题的界面，希望大神可以帮帮忙！拜托拜托
2017-03-31 10:11