xtf-navbar

组件说明

xtf-navbar 是页面顶部导航组件，适用于标题展示、返回和左右操作入口。它支持固定位、状态栏安全距离及三种背景模式，区别于普通容器的是三栏居中布局。

---

基础用法

1. 标题导航

<template><xtf-navbar title="订单详情" /></template>
<script>
export default {}
</script>

2. 返回与右侧操作

<template>
  <view>
    <xtf-navbar title="商品详情" show-back @back="goBack" /><xtf-navbar
      title="商品"
      left-text="返回"
      right-text="收藏"
      @left-click="goBack"
      @right-click="favorite"
  /></view>
</template>
<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack()
    },
    favorite() {
      uni.showToast({ title: '已收藏', icon: 'none' })
    }
  }
}
</script>

3. 自定义左右插槽

<template>
  <xtf-navbar mode="glass">
    <template #left><xtf-button size="sm" label="取消" @click="cancel" /></template>
    <xtf-text level="title" bold text="编辑地址" /><template #right
      ><xtf-button size="sm" label="保存" @click="save"
    /></template>
  </xtf-navbar>
</template>
<script>
export default {
  methods: {
    cancel() {
      console.log('取消编辑')
    },
    save() {
      uni.showToast({ title: '已保存', icon: 'none' })
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | title | String | '' | 主标题 | 常规导航 | | subtitle | String | '' | 标题下方副标题 | 补充状态 | | mode | String | 'solid' | solid/glass/transparent 背景 | 页面视觉风格 | | showBack | Boolean | false | 显示返回图标 | 二级页面 | | leftIcon/leftText | String | '' | 左侧默认操作内容 | 未使用 left 插槽时 | | rightIcon/rightText | String | '' | 右侧默认操作内容 | 未使用 right 插槽时 | | border | Boolean | false | 显示边框 | 浅色导航 | | elevate | Boolean | false | 显示卡片阴影 | 提升层级 | | fixed | Boolean | false | 固定到视口顶部 | 页面滚动时 | | zIndex | String \| Number | 999 | 固定时层级 | fixed 场景 | | safeAreaInsetTop | Boolean | false | 加入状态栏高度 | 原生顶部 | | customClass | String | '' | 根节点类名 | 样式覆盖 | | customStyle | String \| Object | '' | 根节点样式 | 动态样式 |

---

事件

事件名称	触发时机	回调参数	参数说明
back	点击默认返回按钮	()	showBack 为真时触发
left-click	点击默认左侧操作	()	未用左插槽且有左内容时触发
right-click	点击默认右侧操作	()	未用右插槽且有右内容时触发

---

插槽

插槽名	作用	作用域参数	说明
left	自定义左侧区域	无	替换返回按钮或默认左侧操作
default	自定义中间标题区	无	替换 title 与 subtitle
right	自定义右侧区域	无	替换默认右侧操作

主题说明

• 背景使用 var(--xtf-navbar-bg)、var(--xtf-navbar-glass-bg)。
• 边框与操作区使用 var(--xtf-navbar-border)、var(--xtf-navbar-action-bg)。
• 动画使用 var(--xtf-motion-base) 和 var(--xtf-motion-standard)；透明模式使用 --xtf-navbar-action-transparent-bg。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。