微信小程序自定义导航栏

如果你想自定义导航栏，只是让文字在不同机型之间一直处于与右侧小胶囊对齐的状态，这篇博客可能会对你有帮助
实现：
文字的margin-top = 小胶囊的top + (小胶囊的高度-文字的高度 / 2) 单位给px
效果：
iphone6/7/8

iphoneX

XR Max

代码：

<text :style="{ marginTop: customStatusBarHeight + 'px'}" class="header-title">康复云平台</text>
 ......
 ......
		onLoad() {
			wx.getSystemInfo({
				success: () => {
					const { height, top} = wx.getMenuButtonBoundingClientRect(); //结构右上角小胶囊的布局信息
					this.customStatusBarHeight = top + ((height - 18) / 2); // 赋值高度
				},
			});
		},
		data() {
			return {
				customStatusBarHeight: 0, // 自定义导航栏的marginTop
			};
		}

样式微调就可以
如果想要一个更逼真的导航栏可以这样

<view class="" style="background-color: #1CBBB4;width: 100%;" :style="{height: customNavigationBarHeight + 'px'}">
		</view>
onLoad() {
			wx.getSystemInfo({
				success: (res) => {
					const { height, top} = wx.getMenuButtonBoundingClientRect();
					this.customNavigationBarHeight = height + top + 6;
				},
			});
		},
		data() {
			return {
				customNavigationBarHeight: 0
			}
		},

iphone5

iphone6/7/8

iphone x

最后，如果本文对你有帮助，可以关注我的公众号，上面有前端电子书，等学习资源，来找我玩啊