首页 > 其他分享 >MUI底部导航的样式修改

MUI底部导航的样式修改

时间:2022-11-07 17:34:53浏览次数:38  
标签:样式 MUI 50px 底部 102 0px 导航


遇到的问题:想要为MUI的底部导航栏加一个上边框和上内边距均不显示,但是操作导航栏的别的样式就会显示。最后,才发现是一开始为导航栏预留的问题不够。因此,在修改样式没有反应时我们应该考虑是否被别的元素遮挡显示不出来。
使用MUI的底部导航栏想要修改导航顶部分割线。

.mui-bar-tab {
background-color: #fff;
height: 49px;
box-shadow: 0px 0px 8px 0px rgba(102,102,102, 0.6);
padding-top: 5px;
}

添加子页面的时候要为底部导航预留位置。

var firstBack = null; //记录第一次点击返回事件
let plusReadyChildren = ['home']; //记录已经plusReady的子页面的id。子页面plusReady后会写入此数组
var styles = {
top: '0px',
bottom: '50px',
scrollIndicator: 'none'
};

如上bottom的值为50px,因此底部导航栏只有50px的位置。
设置导航栏分割线最好使用线条,因为阴影有一个区域,不好为其预留位置展示。


标签:样式,MUI,50px,底部,102,0px,导航
From: https://blog.51cto.com/u_15867142/5830138

相关文章