buddhism/components/custom-navbar

CustomNavbar 自定义导航栏组件

功能特性

• 自动适配微信小程序状态栏高度
• 自动计算胶囊按钮高度，确保文字与胶囊水平对齐
• 支持自定义标题、返回按钮图标
• 支持右侧插槽，可添加自定义内容
• 支持返回事件回调

使用方法

基础用法

<template>
  <view class="page">
    <custom-navbar title="页面标题" @back="onBack" />
    <!-- 页面内容，无需设置 margin-top -->
    <view class="content">
      <text>页面内容</text>
    </view>
  </view>
</template>

<script>
import CustomNavbar from "@/components/custom-navbar/custom-navbar.vue";

export default {
  components: {
    CustomNavbar
  },
  methods: {
    onBack() {
      console.log('返回按钮被点击');
    }
  }
}
</script>

自定义返回按钮图标

<custom-navbar 
  title="页面标题" 
  :backIcon="customBackIcon"
  @back="onBack" 
/>

隐藏返回按钮

<custom-navbar 
  title="页面标题" 
  :showBack="false"
/>

添加右侧内容

<custom-navbar title="页面标题" @back="onBack">
  <template #right>
    <view class="right-content">
      <text>右侧内容</text>
    </view>
  </template>
</custom-navbar>

Props

参数	类型	默认值	说明
title	String	''	导航栏标题
backIcon	String	CommonEnum.BACK_BUTTON	返回按钮图标路径
showBack	Boolean	true	是否显示返回按钮

Events

事件名	说明	回调参数
back	点击返回按钮时触发	-

Slots

插槽名	说明
right	右侧内容插槽

注意事项

1. 组件会自动计算状态栏和胶囊高度，无需手动设置
2. 组件使用 position: fixed 定位，确保在页面顶部
3. 组件内部包含填充区，页面内容无需设置 margin-top
4. 组件样式使用 scoped，不会影响其他组件