小程序自定义导航栏

小程序自定义导航栏🐤🐤

在这里插入图片描述

js

  data: {statusBarHeight: wx.getSystemInfoSync().statusBarHeight, // 状态栏高度navBarHeight: 44, // 导航栏高度},getSystemInfo() {//获取当前设备信息wx.getSystemInfo({success: res => {// 获取胶囊按钮信息let menuInfo = wx.getMenuButtonBoundingClientRect();// 计算导航栏高度let navBarHeight = menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2;this.setData({statusBarHeight,navBarHeight})}})},onLoad(options) {this.getSystemInfo()},

wxml

<view class="page-lucky" style="padding-top: {{statusBarHeight}}px;"><view class="nav-title" style=" height: {{navBarHeight}}px; line-height: {{navBarHeight}}px;"><image src="/static/detail/arrow-left.png" class="arrow-left" bindtap="back" mode="" /><text>首页</text></view>
</view>

scss

.page-lucky {background-color: #fff;display: flex;align-items: center;justify-content: center;.arrow-left {position: absolute;top: 50%;left: 32rpx;transform: translateY(-50%);text-align: left;width: 40rpx;height: 40rpx;}.nav-title {position: relative;text-align: center;width: 100vw;}
}

json

  "navigationStyle": "custom"

iOS 端（补充）

状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
导航栏高度固定位44px;
注意：iOS端导航栏高度44与小程序默认导航栏（“navgationStyle": "default”）保持一致，iOS端标题与胶囊按钮并不是垂直居中的，是偏靠下一点的，而Android端是垂直居中对齐的，如果iOS也想要上下居中的效果可以采用Android端的方案；