微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦 |
您所在的位置：网站首页 › 微信的搜索框在哪里 › 微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦 |
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配 原理简单 赛过一些大厂的适配 妈妈再也不用担心我强迫症啦
|
在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。 实测中 不同的手机，胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。 完全需要根据手机，动态的计算高度。
先看一些小程序顶部导航栏适配的情况
图一 某团 图二 某乎 图三 某东 图四 某拉 上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。
为解决这个问题就要搞清楚原理
这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度） 而状态栏高度可以通过 wx.getSystemInfo(）获取，现在就只用解决导航栏高度了 观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的 也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2 而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取，现在就只用解决高度差了 wx.getMenuButtonBoundingClientRect() 中也返回了胶囊顶部距屏幕顶部距离的信息（top） 所以知 高度差 = 胶囊顶部距屏幕顶部距离 - 状态栏高度
用这两个API 我们可以得到如下的数据
导航栏整体高度 伪呆🐎 menu = wx.getMenuButtonBoundingClientRect() system = wx.getSystemInfo 导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2 到此我们就完美解决了导航栏高度的问题 而导航栏内容就是 内容标签的view高度等于menu.height并且垂直居中
效果
真机效果
最终效果
讲完了 上呆🐎
注： 一般需将自定义导航栏单独出来为组件 app.js 呆🐎 //app.js App({ globalData: {}, onLaunch: function() { //获取系统信息 wx.getSystemInfo({ success: res => { this.system = res } }) //获取胶囊信息 this.menu = wx.getMenuButtonBoundingClientRect() //打印数据 console.log('系统信息', this.system) console.log('胶囊信息', this.menu) } })组件.js 呆🐎 //获取应用实例 const app = getApp() Component({ /** * 组件的属性列表 */ properties: { //导航栏颜色 navColor: { type: String, value: '#fff' } }, /** * 组件的初始数据 */ data: { s: app.system.statusBarHeight, //状态栏高度 n: (app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height, //导航栏高度 h: app.menu.height //胶囊高度 } })组件.wxml 呆🐎 |
【本文地址】
今日新闻 |
推荐新闻 |