自定义navigationBar组件

自定义navigationBar组件

1. 设置navigation自定义

app.json

{
  "window": {
    "navigationStyle": "custom"
  }
}

2. 全局注册组件

app.json

{
  "usingComponents": {
    "Navbar": "/components/navbar/index"  // 路径为组件所在路径
  }
}

3. 获取自定义组件所需数据

app.js

App({
  onLaunch() {
      this.getNavbarHeight();
  },
  getNavbarHeight() {
    // 状态栏高度
    const { statusBarHeight, platform } = wx.getSystemInfoSync();
    wx.setStorageSync('statusBarHeight', statusBarHeight + 'px')

    // 胶囊数据
    const {
      top,
      height
    } = wx.getMenuButtonBoundingClientRect();
    if (top && top !== 0 && height && height !== 0) {
      const navbarHeight = (top - statusBarHeight) * 2 + height;
      wx.setStorageSync('navBarHeight', navbarHeight + 'px')
    } else {
      // android 一般为 48, ios 一般为 40
      wx.setStorageSync('navBarHeight', platform === 'android' ? '48px' : '40px')
    }
  }
})

4. 自定义组件内容

navbar/index.js

Component({
  properties: {
    title: {
      type: String,
      required: true
    }
  },
  data: {
    statusBarHeight: wx.getStorageSync('statusBarHeight'),
    navBarHeight: wx.getStorageSync('navBarHeight')
  }
})

navbar/index.wxml

<view class="navbar-box">
  <view class="status-bar" style="height: {{ statusBarHeight }};"></view>
  <view class="navbar-wrap" style="height: {{ navBarHeight }};">
      <view class="btn-wrap">
        <view class="back">返回</view>
      </view>
      <view class="title">{{ title }}</view>
  </view>
</view>

navbar/index

.navbar-box {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 9999;
}
.navbar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.btn-wrap {
  position: absolute;
  left: 10rpx;
  top: 50%;
  transform: translateY(-50%);
}

5. 页面使用

pages/index/index.wxml

<view>
  <Navbar title="首页"></Navbar>
  <view>其他内容</view>
</view>