NavBar 导航栏

NavBar 是页面顶部的导航栏组件，显示页面标题和返回按钮。

外观

┌──────────────────────────────────┐
│  ← 返回    页面标题         [...]│
└──────────────────────────────────┘

静态配置

全局配置（app.json）

{
  "window": {
    "navigationBarTitleText": "全局标题",
    "navigationBarBackgroundColor": "#6366f1",
    "navigationBarTextStyle": "white"
  }
}

页面配置（page.json）

页面级配置覆盖全局配置：

{
  "navigationBarTitleText": "详情页",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

动态控制

修改标题

await woo.setNavigationBarTitle({ title: '新标题' })

修改颜色

await woo.setNavigationBarColor({
  frontColor: '#ffffff',       // 标题和按钮颜色
  backgroundColor: '#6366f1', // 背景色
})

加载动画

// 显示加载指示器
woo.showNavigationBarLoading()

// 数据加载完成后隐藏
await fetchData()
woo.hideNavigationBarLoading()

完整示例

<template>
  <div class="page">
    <h2>{{ article.title }}</h2>
    <div v-html="article.content"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import woo from 'mini-sdk'

const article = ref({ title: '', content: '' })

onMounted(async () => {
  const { query } = woo.getRoute()

  // 加载时显示导航栏 loading
  woo.showNavigationBarLoading()

  try {
    const res = await woo.request.get(`/api/articles/${query.id}`)
    article.value = res.data

    // 动态设置标题
    woo.setNavigationBarTitle({ title: res.data.title })
  } finally {
    woo.hideNavigationBarLoading()
  }
})
</script>