stock2
stock2
  • 发布:2015-05-09 15:49
  • 更新:2015-05-22 21:38
  • 阅读:3793

底部菜单 display:none ,显示是空白(还是占用地方)

分类:MUI

我采用了 display:none 该div的区域显示空白,但地方还占着. 请问如何修复这个问题? 谢谢
感觉是 display: table-cell;问题. 而这个又不能不用.
我查看了css, 是 .mui-bar-tab .mui-tab-item {
display: table-cell;
width: 1%; height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}

2015-05-09 15:49 负责人:无 分享
已邀请:

最佳回复

houfeng2016

houfeng2016

tabbar 隐藏时,无论 div 模式还是 webview 模式 (参见 Hello MUI 的两种示例),都会出现空白。

div 模式
在隐藏 tabbar 时,同时把 .mui-content 的 padding-bottom 设置为 0px 就没有空白了,显示 tabbar 时需要把 .mui-content 的 padding-bottom 原来的值(应该是 50px)再设置回来。
参考代码:

document.querySelector('.mui-content').style.paddingBottom='0px'; //就是这里

webview 模式
在隐藏 tabbar 时,同时把几个子页面的 bottom (此为 WebViewStyle)设置为 0px 就没有空白了,显示 tabbar 时需要把几个子页面的 bottom 原来的值(应该是 50px)再设置回来。
参考代码:

var subViews=plus.webview.currentWebview().children();  
for(var i=0;i<subViews.length;i++){  
     var ws = subViews[i];  
     ws.setStyle({"bottom":"0px"}); //就是这里  
}
超仔爱生态闭环

超仔爱生态闭环

隐藏的主要两种方式:
display:none;//不占用地方,原本所占有的空间制空
visibility:hidden;//占用地方,原有占有空间保留,显示空白;
在display:none;/改成/ display:none!important; //表示样式优先选择none属性值

  • stock2 (作者)

    谢谢你的回复, 我试了下,反而不隐藏了.

    document.getElementById("test").style.display="none!important";

    不支持?

    2015-05-10 09:42

  • 超仔爱生态闭环

    有这种js原生动态不能这样写;这种方式主要是在css中直接应用。

    我其实想看看你是怎么实现的。如果你也是用js原生去覆盖内敛或者外联样式的话,应该不会出现问题;display:none绝对可以实现的

    2015-05-10 16:17

stock2

stock2 (作者)

谢谢楼上的回复,我明天试试,再告知结果

stock2

stock2 (作者)

我试了下,反而不隐藏了.
document.getElementById("test").style.display="none!important";
不支持?

stock2

stock2 (作者)

见图.

蔡繁荣

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

建议上传下源代码,这样看太累了:)

stock2

stock2 (作者)

这个是底部菜单 输入法 绕不开的, 项目中终究会碰到.
希望版主们解决下.

  • 蔡繁荣

    可以用chrome调试下

    2015-05-14 14:42

stock2

stock2 (作者)

<link rel="stylesheet" href="css/mui.css">
document.getElementById("menuA").style.display="none";

<div id="menuA" class="mui-bar mui-bar-tab" >
<a id="defaultTab" class="mui-tab-item mui-active" href="1.html">
<span class="mui-icon mui-icon-home" >首页</span>
</a>
<a class="mui-tab-item" href="2.html">
<span class="mui-icon mui-icon-chat " >维修</span>
</a>
<a class="mui-tab-item" href="3.html">
<span class="mui-icon mui-icon-search " >查询</span>
</a>
<a class="mui-tab-item" href="4.html">
<span class="mui-icon mui-icon-gear" >设置</span>
</a>
</div>

stock2

stock2 (作者)

顶下吧 问题都应该结贴,看到问答里好多重复哦。

stock2

stock2 (作者)

再顶下.

  • 蔡繁荣

    问题还没解决?

    2015-05-20 15:20

  • stock2 (作者)

    没呀 结不了帖啊

    2015-05-20 15:53

stock2

stock2 (作者)

再顶下 ,希望hbulider的人员看到 回复下

stock2

stock2 (作者)

这个问题 想换个思路了
能不能 让div 底部菜单 绝对定位, 一直在底部.这样不移动也就ok了呀

蔡繁荣

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

你可以换个思路,底部用webview来实现

stock2

stock2 (作者)

plus.webview.currentWebview().setStyle({bottom:"50px"});

可以去掉占位,但输入法打开就立刻关闭了,

奇怪的是,如果去掉最上面的信号栏,底部菜单反而不会被输入法顶起

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