init

components/navbar/customNavbar.vue

@@ -0,0 +1,138 @@
+<template>
+  <view
+    class="custom-navbar"
+    :style="{ paddingTop: statusBarHeight + 'px', height: navHeight + 'px' }"
+  >
+    <view class="nav-content">
+      <!-- 左侧返回 -->
+      <view class="nav-left">
+        <u-icon name="arrow-left" size="44" color="#333" @click="onBack"></u-icon>
+        <u-icon name="home" size="44" color="#333" @click="goHome"></u-icon>
+      </view>
+
+      <!-- 中间标题 -->
+      <view class="nav-title">{{ title }}</view>
+
+      <!-- 右侧按钮（位于胶囊左侧） -->
+      <view
+        class="nav-right"
+        :style="{ marginRight: menuRightGap + 'px' }"
+      >
+        <view
+          v-for="(btn, index) in rightButtons"
+          :key="index"
+          class="nav-btn"
+          @click="btn.onClick && btn.onClick()"
+        >
+          <u-icon
+            :name="btn.icon"
+            :color="btn.color || '#333'"
+            :size="btn.size || 40"
+          ></u-icon>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'customNavbar',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    rightButtons: {
+      type: Array,
+      default: () => [],
+    },
+    back: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+      navHeight: 0,
+      menuRightGap: 0, // 胶囊按钮与右侧边距
+    };
+  },
+  mounted() {
+    const systemInfo = uni.getSystemInfoSync();
+    const menuButton = wx.getMenuButtonBoundingClientRect
+      ? wx.getMenuButtonBoundingClientRect()
+      : null;
+
+    if (menuButton) {
+      this.statusBarHeight = systemInfo.statusBarHeight;
+      this.navHeight =
+        menuButton.bottom + menuButton.top - systemInfo.statusBarHeight;
+      this.menuRightGap =
+        systemInfo.screenWidth - menuButton.right + 8; // 适度留一点间隙
+    } else {
+      // 其他端
+      this.statusBarHeight = systemInfo.statusBarHeight;
+      this.navHeight = 90;
+      this.menuRightGap = 16;
+    }
+  },
+  methods: {
+    onBack() {
+      if (this.back) {
+        this.back();
+      } else {
+        uni.navigateBack();
+      }
+    },
+    goHome(){
+       	uni.reLaunch({
+					url:'../index/index'
+				})
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.custom-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
+  z-index: 999;
+
+  .nav-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 24rpx;
+  }
+
+  .nav-left {
+    width: 50rpx;
+    display: flex;
+    align-items: center;
+  }
+
+  .nav-title {
+    flex: 1;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+
+  .nav-right {
+    display: flex;
+    align-items: center;
+    .nav-btn {
+      margin-left: 20rpx;
+    }
+  }
+}
+</style>