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>