MUI底部导航的样式修改

遇到的问题:想要为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的位置。
设置导航栏分割线最好使用线条,因为阴影有一个区域,不好为其预留位置展示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值