NavBar

The NavBar is the top navigation bar component. It shows the page title and the back button.

Appearance

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

Static configuration

Global configuration (app.json)

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

Page configuration (page.json)

Page-level options override the global settings:

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

Dynamic control

Update the title

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

Update colors

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

Loading animation

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

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

Full example

<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>