微信小程序自定义导航栏定位及胶囊按钮图解

文章来源:CSDN 发布日期:2024-06-11 分类:小程序博客 阅读( )

在自定义小程序导航栏时,右上角的胶囊(MenuButton)在不同机型测试,会发现很难适配。

实测中 不同的手机,胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。
由于小程序在不同的手机上顶部布局会发生变化,不能正确避开胶囊位置,所以通过官方给出的胶囊信息,可以计算出胶囊位置,完全需要根据手机,动态的计算高度。

演示:

图解胶囊按钮位置:

这是在没有设置自定义时的原生导航栏,我们发现整体的高度就是 (状态栏高度 + 导航栏高度)
而状态栏高度可以通过 wx.getSystemInfo()获取,现在就只用解决导航栏高度了

观察发现,胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差,是一样的
也就是说 导航栏高度 = 胶囊高度 +(高度差)x  2
而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取,现在就只用解决高度差了
wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息(top)
所以知 **高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度**  

重要事情说三遍
计算出来的值一定要用px,不要用rpx!
计算出来的值一定要用px,不要用rpx!!
计算出来的值一定要用px,不要用rpx!!!

计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致,所以为了我们适配更多型号,我们需要计算3个值:

如下图:

1. 整个导航栏的高度;

2. 胶囊按钮与顶部的距离;

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息。

通过这些信息我们可以计算出上面说的3个值:

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2;

2. 胶囊按钮与顶部的距离 = top;

3.胶囊按钮与右侧的距离 = windowWidth - right。

这样我们可以定义一些全局变量

app.js代码:

App({    onLaunch: function () {      const systemInfo = wx.getSystemInfoSync(); //获取系统信息      const menuInfo = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮的信息      this.globalData.menuHeight = menuInfo.height; // 获取胶囊按钮的高      this.globalData.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏的高      this.globalData.menuRight = menuInfo.right; // 获取胶囊按钮的距离屏幕最右边的距离(此处用于设置导航栏左侧距离屏幕的距离)      this.globalData.navBarHeight = (menuInfo.top - systemInfo.statusBarHeight) * 2 + menuInfo.height; // 计算出导航栏的高度      this.globalData.navBarBottom = this.globalData.navBarHeight + systemInfo.statusBarHeight;      this.globalData.winHeight = systemInfo.windowHeight;      this.autoUpdate();    },    globalData: {      navBarHeight:0,// 导航栏高度      navBarBottom: 0,//胶囊按钮底部位置      menuHeight:0,//胶囊按钮 高度      statusBarHeight:0,//状态栏高度      menuRight:0,//胶囊按钮 距离屏幕右边的距离      winHeight:0    },})

最新文章:

二维码