小程序自定义navBar导航栏 100%原生定位

--------------------------------------------------------------------------如题

小程序自定义navBar导航栏 100%原生定位_第1张图片
首先获取手机系统信息
var sysInfo = wx.getSystemInfoSync();
再返回中的对象获取状态栏高度:sysInfo.statusBarHeight
微信提供的接口getMenuButtonBoundingClientRect可以获取到胶囊按钮的定位及高度信息
var topbtnInfo = wx.getMenuButtonBoundingClientRect();

注意:getMenuButtonBoundingClientRect 基础库 2.1.0 开始支持

计算:
自定义navBar的高度 = 胶囊按钮的高度 +(胶囊按钮距屏幕顶部距离-屏幕状态栏高度)× 2

大家看图吧 -------- T x T---------

小程序自定义navBar导航栏 100%原生定位_第2张图片

本人菜鸟一枚,表述能力差了点,有问题的可以留言探讨----------------------------------------------------------------------------END

你可能感兴趣的:(小程序)