更新记录

0.1.2（2026-07-31） 下载此版本

  • 修复 Android 暗黑模式下默认返回图标颜色过深的问题：APP-ANDROID 下由导航栏显式传入单层 --nax-color-text 变量，避免 nax-icon 内部嵌套 CSS 变量 fallback 解析异常；浅色模式、primary 类型及显式 backIconColor 保持原有行为。

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ √ - √ √

其他

多语言 暗黑模式 宽屏模式
× √ ×

# nax-nav-bar

自定义顶部导航栏（需页面 navigationStyle: custom）。面向 uni-app x：状态栏安全区、fixed 占位、返回栈兜底、微信小程序胶囊预留。

用法

<template>
  <view class="page">
    <nax-nav-bar title="页面标题" home-url="/pages/index/index" />
    <view class="body">
      <!-- 页面内容；fixed 默认会插入占位 -->
    </view>
  </view>
</template>

pages.json：

{
  "path": "pages/demo/index",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": ""
  }
}

自定义右侧

<nax-nav-bar title="详情">
  <template #right>
    <nax-icon name="search" size="22" @click="onSearch" />
  </template>
</nax-nav-bar>

仅事件、不自动返回

<nax-nav-bar title="编辑" :auto-back="false" @back="onBack" />

Props

属性 类型 默认 说明
title string '' 标题
showBack boolean true 是否显示返回区
backText string '' 返回文案
backIcon string 'chevron-left' 返回图标（nax-icon）；空串不显示图标
backIconColor string '' 返回图标颜色；空串时跟随导航栏 type / 主题
autoBack boolean true 点击返回是否自动 navigateBack
homeUrl string '' 栈底无法返回时 reLaunch 目标
fixed boolean true 是否固定顶部
placeholder boolean true fixed 且非 immersive 时是否占位
immersive boolean false 沉浸：fixed 不占位，背景透明
border boolean true 底部分割线（primary/immersive 默认无）
safeAreaInsetTop boolean true 顶部状态栏安全区
type string 'default' default / primary
height string '44' 内容行高度（px；支持 sm/md/lg）
zIndex number 980 fixed 层级
titleAlign string 'center' center / left
show boolean true 是否显示
customClass string '' 根扩展 class

事件

事件 参数 说明
back — 点击返回；autoBack 为 true 时仍会触发后再导航

插槽

插槽 说明
left 左侧扩展（位于返回按钮右侧）
default 中间自定义（覆盖 title）
right 右侧操作区

主题 Token

  • --nax-color-bg / --nax-color-border
  • --nax-color-primary
  • --nax-color-text / --nax-color-text-inverse
  • --nax-font-size-md / --nax-font-size-lg
  • --nax-font-weight-medium

依赖

  • nax-icon
  • nax-ui-theme（可选，提供统一 token）

注意

  1. 页面必须 navigationStyle: custom，否则会与系统导航栏叠层。
  2. 微信小程序会为右侧预留胶囊宽度；其它小程序无胶囊 API 时不做错误 margin。
  3. 首页 / tab 页通常设 show-back=false，或配置 home-url 作为栈底出口。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。