1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 解决小程序自定义导航栏和右边胶囊高度一致

解决小程序自定义导航栏和右边胶囊高度一致

时间:2018-06-30 21:10:45

相关推荐

解决小程序自定义导航栏和右边胶囊高度一致

名词解释:

1.statusBarHeight:状态栏高度(小程序可获取),是指顶部显示手机信号,时间,电量的那一个小的状态条的高度。如图红色部分。

2.titleBarHeight:标题栏高度(小程序获取不到),是从状态栏的底部开始的,到标题栏的底部的高度为止。如图绿色部分。

3.wx.getMenuButtonBoundingClientRect():获取菜单按钮(右上角胶囊按钮)的布局位置信息。

目的一:要实现自定义导航栏和小胶囊的高度一致,如图显示:

方法:设置自定义导航栏top为wx.getMenuButtonBoundingClientRect().top

目的二:实现自定义胶囊按钮和右边的高度一致

方法:利用wx.getSystemInfo()返回的参数statusBarHeight计算,

胶囊高度为32px,

fixed定位top值计算:statusBarHeight + (titleBarHeight - 32)/2

(titleBarHeight安卓是48,ios是44)

参考网上资源:1.https://developers./community/develop/doc/00086eae518d70f88ea7557fb56c00?_at=1560019702849

2.https://developers./community/develop/doc/000c443517c1b819e888d68e751000

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。