更新记录

1.0.3（2025-07-01） 下载此版本

更新文档

1.0.2（2025-04-08） 下载此版本

1

1.0.1（2024-11-27） 下载此版本

优化

平台兼容性

uni-app(4.05)

其他

x-nav-bar 导航栏组件使用说明

组件概述

x-nav-bar 顶部导航栏组件，支持自适应状态栏高度、返回按钮、插槽自定义和小程序兼容等功能。

功能特性

• 🔧 自适应状态栏高度
• 🔙 智能返回按钮（支持返回和回到首页）
• 🎨 支持深色/浅色返回按钮主题
• 📱 小程序安全区域适配
• 🔌 灵活的插槽系统
• 📐 多种布局方式
• 🎯 可自定义样式

基础用法

简单标题栏

<template>
  <x-nav-bar>
    <text>页面标题</text>
  </x-nav-bar>
</template>

自定义左侧按钮

<template>
  <x-nav-bar>
    <template #left>
      <button @click="customBack">自定义返回</button>
    </template>
    <text>页面标题</text>
  </x-nav-bar>
</template>

自定义右侧内容

<template>
  <x-nav-bar>
    <text>页面标题</text>
    <template #right>
      <button>更多</button>
    </template>
  </x-nav-bar>
</template>

属性配置

布局方式说明

• common: 左右靠两侧，中间居中对齐
• fill: 左右靠两侧，中间填充剩余空间

插槽

事件

高级用法示例

渐变背景导航栏

<template>
  <x-nav-bar 
    :bg-color="'linear-gradient(45deg, #ff6b6b, #4ecdc4)'"
    back-color="white"
  >
    <text style="color: white; font-weight: bold;">渐变标题栏</text>
  </x-nav-bar>
</template>

自定义高度和样式

<template>
  <x-nav-bar 
    :height="60"
    padding="0 20px"
    :bg-color="'#f8f9fa'"
  >
    <view style="display: flex; align-items: center;">
      <image src="/static/logo.png" style="width: 24px; height: 24px; margin-right: 8px;"></image>
      <text style="font-size: 18px; font-weight: bold;">应用名称</text>
    </view>
    <template #right>
      <view style="display: flex; gap: 10px;">
        <button size="mini">搜索</button>
        <button size="mini">菜单</button>
      </view>
    </template>
  </x-nav-bar>
</template>

填充式布局

<template>
  <x-nav-bar layout="fill">
    <view style="display: flex; justify-content: space-between; width: 100%;">
      <text>左侧内容</text>
      <text>右侧内容</text>
    </view>
  </x-nav-bar>
</template>

监听内部样式

<template>
  <x-nav-bar @innerStyle="onInnerStyle">
    <text>监听样式</text>
  </x-nav-bar>
</template>

<script>
export default {
  methods: {
    onInnerStyle(style) {
      console.log('导航栏样式:', style)
      // 可以根据样式信息调整页面其他元素
    }
  }
}
</script>

注意事项

1. 状态栏适配: 组件会自动获取设备状态栏高度并适配
2. 返回逻辑:
   • 页面栈 > 1 时显示返回按钮，点击执行 uni.navigateBack()
   • 分享页面显示首页按钮，点击执行 uni.reLaunch() 到起始页
3. 小程序兼容: 在小程序中会自动适配右侧安全区域
4. 层级管理: 默认 z-index 为 99，可根据需要调整
5. 占位模式: 开启 placeholder 可防止页面内容被固定导航栏遮挡

样式定制

组件使用 SCSS 编写样式，支持通过 CSS 自定义属性进行部分样式定制：

/* 自定义状态栏高度变量 */
--x-status-bar-height: 状态栏高度;

/* 小程序安全区域变量 */
--x-safe-right: 右侧安全区域宽度;

插件如果对你有帮助给个好评吧~