uniapp 自定义顶部导航栏 ,以及fixed定位兼容

1.使用uview的u-navbar自定义导航栏时,发现网页h5是正常的,但是启动模拟器app时,发现内容全部被导航栏覆盖,顶上去了,如下图

.         

左边为本地网页显示,右图为手机模拟器显示

解决方法:加上placeholder 即可。

<u-navbar placeholder title="充值" leftIconColor="rgb(255, 255, 255)" @rightClick="rightClick" :autoBack="true"
			bgColor="rgb(250, 161, 50)" titleStyle="color:rgb(255, 255, 255);font-weight:700">
		</u-navbar>

2. app 和小程序 在使用定位的时候,top定位会有差异

 原因:APP 和微信的原生导航栏和tabbar下,元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的,所以元素坐标会包含导航栏和tabbar的高度。

解决办法:

uni-app新增了2个css变量:–window-top和–window-bottom,可以直接style中使用替代top和bottom

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值