ea

miniprogram/components/custom-nav/custom-nav.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

miniprogram/components/custom-nav/custom-nav.ts

@@ -0,0 +1,48 @@
+Component({
+  options: {
+    multipleSlots: true,
+  },
+  properties: {
+    contentHeight: {
+      type: Number,
+      value: 44,
+    },
+    paddingX: {
+      type: Number,
+      value: 0,
+    },
+    background: {
+      type: String,
+      value: 'transparent',
+    },
+  },
+  data: {
+    statusBarHeight: 0,
+    navHeight: 44,
+  },
+  lifetimes: {
+    attached() {
+      this.updateNavMetrics()
+    },
+  },
+  methods: {
+    updateNavMetrics() {
+      const systemInfo = wx.getSystemInfoSync()
+      const statusBarHeight = systemInfo.statusBarHeight || 0
+      const contentHeight = Number(this.data.contentHeight) || 44
+      const navHeight = statusBarHeight + contentHeight
+
+      this.setData({
+        statusBarHeight,
+        navHeight,
+      })
+
+      this.triggerEvent('ready', {
+        statusBarHeight,
+        contentHeight,
+        navHeight,
+      })
+    },
+  },
+})
+

miniprogram/components/custom-nav/custom-nav.wxml

@@ -0,0 +1,8 @@
+<view
+  class="custom-nav"
+  style="height: {{navHeight}}px; padding-top: {{statusBarHeight}}px; padding-left: {{paddingX}}rpx; padding-right: {{paddingX}}rpx; background: {{background}};"
+>
+  <view class="custom-nav__content" style="height: {{contentHeight}}px;">
+    <slot></slot>
+  </view>
+</view>

miniprogram/components/custom-nav/custom-nav.wxss

@@ -0,0 +1,15 @@
+.custom-nav {
+  width: 100%;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.custom-nav__content {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}