介绍

最近在做微信小程序时，顶部标题栏总是与胶囊对不齐。往往是在这款手机上对齐了，在另外一款手机差很多。我在查阅资料后，提出了一种方法解决这个问题，即：在页面onLoad或组件created时，利用微信小程序提供的API，获取系统状态栏高度和胶囊信息，进而动态调整顶部标题栏样式。在苹果、小米、荣耀手机做验证，能做到精准对齐。

理论

胶囊样式应该是垂直居中，有1px的border，border-radius为18px 。

若要使顶部标题栏与胶囊对齐，则其高度必须是导航栏高度，标题栏内容也要垂直居中，顶部标题栏的外边距或内边距必须是状态栏高度。

如果顶部标题栏内是一个输入框，为美观，输入框可以采用与胶囊相同的高、border。（注意这里不能使用rpx，因为胶囊border是写死的1px，不会变化）

示意如下：

计算方法

状态栏高度：wx.getSystemInfoSync()，使用statusBarHeight。

胶囊高度：wx.getMenuButtonBoundingClientRect()，使用返回的height。

导航栏高度：(胶囊top-状态栏高度)*2 + 胶囊高度。

注意：导航栏高度可能要考虑胶囊border（1像素），我这里没有仔细验证。

示意代码

 //获取系统信息， 状态栏高度为 sysInfo['statusBarHeight'];let sysInfo = wx.getSystemInfoSync();// 胶囊信息let menu = wx.getMenuButtonBoundingClientRect();// 导航栏高度let navBarHeight = (menu.top - sysInfo.statusBarHeight) * 2 + menu.height;

一些错误的处理方式

导航栏高度错以为是屏幕高度-窗口高度-状态栏高度，经过验证是错误的。

标题栏border采用了相对像素值，如rpx\upx等。这是错误的，应用px。

参考资料微信小程序自定义导航栏胶囊菜单按钮高度适配原理简单赛过一些大厂的完美适配妈妈再也不用担心我强迫症啦-物联网技术文章-傲云电气网傲云电气网最新文章：微信小程序自定义导航栏胶囊菜单按钮高度适配原理简单赛过一些大厂的完美适配妈妈再也不用担心我强迫症啦，在自定义小程序导航栏时，右上角的胶囊（MenuButton）在不同机型测试，会发现很难适配。不同的手机，胶囊高度也不一样，完全需要动态的计算高度。先看一些小程序顶部导航栏适配的情况图一某团图二某乎图三某东图四某拉上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。为解决这个问题就要搞清楚原理这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是（状态栏高度 + 导航栏高度）而状态栏高度可...https://www.weixiuzhan.cn/news/show-28971.html小程序全屏页面及自定义顶部标题栏（附getMenuButtonBoundingClientRect实现）_laishaojiang的博客-CSDN博客前段时间UI同学拿着知乎热榜小程序来问我，说现在小程序怎么这么牛皮了，居然可以把搜索栏放在顶部标题栏上面去了，然后质问我怎么不告诉她这个功能，因为她说要是早发现可以这样，她的设计就可以有很多方便的地方了。我有种不好的预感，接下来刚上线不久的项目可以要大改- -！这是知乎热榜小程序，其实这并不是把搜索栏放在了顶部标题栏里面，而是把小程序把设置为全屏模式，只保留右上角的胶囊...https://blog.csdn.net/laishaojiang/article/details/103742078

微信小程序顶部标题栏与胶囊对齐相关推荐

微信小程序自定义组件之胶囊对齐搜索FloatSearch
大家好哇,我是梦辛工作室的灵,最近又写了一个 ui组件,是与微信小程序胶囊所对齐的一个搜索框,还带展开过度动画哦,老样子,先看效果图效果还是不错的,然后来看下如何使用: //先引入组件 &qu ...
微信小程序顶部标题栏仅保留右上角胶囊状按钮
navigationStyle, (导航栏样式,仅支持 default/custom.custom 模式可自定义导航栏,只保留右上角胶囊状的按钮),如果在app.json里面的window增加navi ...
微信小程序定位地址与胶囊对齐
主要是两个事件: 1,wx.getSystemInfoSync(); //获取系统信息, 状态栏高度为 sysInfo['statusBarHeight']; 2,wx.getMenuButtonB ...
微信小程序顶部透明状态标题栏搜索栏与胶囊对齐
微信小程序顶部透明状态标题栏搜索栏LOGO与胶囊对齐效果如下 App.js wx.getSystemInfo({success: res => {console.log(res)let cus ...
微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
微信小程序-文本与图片无法对齐
最近项目开发小程序,于是打算重新做一遍七月老师的小程序入门项目,熟悉一下,但是做到阅读页面时却突然遇到了一个问题:文本与图片怎么都无法对齐,真的是对着代码研究了一个多小时才突然想到了原因,想想也许有人 ...

微信小程序顶部标题栏与胶囊对齐

介绍

理论

计算方法

示意代码

一些错误的处理方式

微信小程序顶部标题栏与胶囊对齐相关推荐

最新文章

热门文章