小程序自定义导航栏

小程序自定义导航栏🐤🐤

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()
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

wxml

<view class="nav-box" 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>
1
2
3
4
5
6

scss

.nav-box {
  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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

json

  "navigationStyle": "custom"
1

iOS 端（补充）

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

Android 端（补充）

• 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
• 根据胶囊的位置与高度计算出导航栏的高度，与Android端默认导航栏（“navigationStyle”: “default”）保持一致，并且Android端标题与胶囊是垂直居中对齐的

参考链接 | 图片及文字