fix(TopNavBar): update root page back navigation behavior
replace WeChat mini-program specific exit logic with uni.reLaunch to index page for consistent cross-platform behavior when at the root navigation stack
This commit is contained in:
duanshuwen
@@ -1,176 +0,0 @@
|
|||||||
# TopNavBar 顶部导航栏组件
|
|
||||||
|
|
||||||
一个功能完整的顶部导航栏组件，支持固定定位、自定义样式和插槽内容。
|
|
||||||
|
|
||||||
## 功能特性
|
|
||||||
|
|
||||||
- ✅ 支持固定在页面顶部（可配置）
|
|
||||||
- ✅ 自动适配状态栏高度
|
|
||||||
- ✅ 支持自定义标题和颜色
|
|
||||||
- ✅ 支持插槽自定义内容
|
|
||||||
- ✅ 内置返回按钮功能
|
|
||||||
- ✅ 响应式设计
|
|
||||||
- ✅ 深色模式支持
|
|
||||||
- ✅ 安全区域适配
|
|
||||||
|
|
||||||
## 基础用法
|
|
||||||
|
|
||||||
### 简单使用
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<TopNavBar title="页面标题" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import TopNavBar from '@/components/TopNavBar/index.vue'
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 固定在顶部
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<TopNavBar title="页面标题" :fixed="true" />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义样式
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<TopNavBar
|
|
||||||
title="页面标题"
|
|
||||||
backgroundColor="#007AFF"
|
|
||||||
titleColor="#ffffff"
|
|
||||||
backIconColor="#ffffff"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 标题对齐方式
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<!-- 标题居中显示（默认） -->
|
|
||||||
<TopNavBar title="居中标题" titleAlign="center" />
|
|
||||||
|
|
||||||
<!-- 标题左对齐显示 -->
|
|
||||||
<TopNavBar title="左对齐标题" titleAlign="left" />
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 使用插槽
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<TopNavBar>
|
|
||||||
<template #title>
|
|
||||||
<view class="custom-title">
|
|
||||||
<text>自定义标题内容</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #right>
|
|
||||||
<uni-icons type="more" size="20" color="#333" />
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## API
|
|
||||||
|
|
||||||
### Props
|
|
||||||
|
|
||||||
| 参数 | 类型 | 默认值 | 说明 |
|
|
||||||
|------|------|--------|------|
|
|
||||||
| title | String | '' | 导航栏标题 |
|
|
||||||
| fixed | Boolean | false | 是否固定在页面顶部 |
|
|
||||||
| showBack | Boolean | true | 是否显示返回按钮 |
|
|
||||||
| backgroundColor | String | '#ffffff' | 背景颜色 |
|
|
||||||
| titleColor | String | '#333333' | 标题文字颜色 |
|
|
||||||
| backIconColor | String | '#333333' | 返回按钮图标颜色 |
|
|
||||||
| hideStatusBar | Boolean | false | 是否隐藏状态栏占位 |
|
|
||||||
| zIndex | Number | 999 | 层级索引 |
|
|
||||||
| titleAlign | String | 'center' | 标题对齐方式，可选值：'center'、'left' |
|
|
||||||
|
|
||||||
### Events
|
|
||||||
|
|
||||||
| 事件名 | 说明 | 参数 |
|
|
||||||
|--------|------|------|
|
|
||||||
| back | 点击返回按钮时触发 | - |
|
|
||||||
|
|
||||||
### Slots
|
|
||||||
|
|
||||||
| 插槽名 | 说明 |
|
|
||||||
|--------|------|
|
|
||||||
| title | 自定义标题内容 |
|
|
||||||
| right | 自定义右侧内容 |
|
|
||||||
|
|
||||||
## 使用示例
|
|
||||||
|
|
||||||
### 订单列表页面
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<TopNavBar>
|
|
||||||
<template #title>
|
|
||||||
<Tabs
|
|
||||||
:tabs="tabList"
|
|
||||||
:defaultActive="currentTabIndex"
|
|
||||||
@change="handleTabChange"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
<view class="page-content">
|
|
||||||
<!-- 内容区域 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 商品详情页面
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view>
|
|
||||||
<TopNavBar
|
|
||||||
title="商品详情"
|
|
||||||
:fixed="true"
|
|
||||||
@back="handleBack"
|
|
||||||
>
|
|
||||||
<template #right>
|
|
||||||
<uni-icons type="share" size="20" color="#333" />
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
<view class="page-content">
|
|
||||||
<!-- 内容区域 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const handleBack = () => {
|
|
||||||
// 自定义返回逻辑
|
|
||||||
console.log('自定义返回处理')
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
|
|
||||||
1. **固定定位使用**：当设置 `fixed="true"` 时，组件会固定在页面顶部，此时需要为页面内容添加适当的顶部间距。
|
|
||||||
|
|
||||||
2. **状态栏适配**：组件会自动获取系统状态栏高度并进行适配，无需手动处理。
|
|
||||||
|
|
||||||
3. **返回按钮**：默认点击返回按钮会执行 `uni.navigateBack()`，如果需要自定义返回逻辑，请监听 `@back` 事件。
|
|
||||||
|
|
||||||
4. **样式覆盖**：如需自定义样式，建议通过 props 传入颜色值，或在父组件中使用深度选择器覆盖样式。
|
|
||||||
|
|
||||||
5. **插槽使用**：title 插槽会完全替换默认的标题显示，right 插槽用于添加右侧操作按钮。
|
|
||||||
|
|
||||||
## 更新日志
|
|
||||||
|
|
||||||
### v1.0.0
|
|
||||||
- 初始版本发布
|
|
||||||
- 支持基础导航栏功能
|
|
||||||
- 支持固定定位配置
|
|
||||||
- 支持自定义样式和插槽
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view class="demo-container">
|
|
||||||
<!-- 示例1: 基础用法 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">基础用法</view>
|
|
||||||
<TopNavBar title="基础导航栏" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例2: 固定在顶部 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">固定在顶部</view>
|
|
||||||
<TopNavBar title="固定导航栏" :fixed="true" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例3: 自定义颜色 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">自定义颜色</view>
|
|
||||||
<TopNavBar
|
|
||||||
title="蓝色导航栏"
|
|
||||||
backgroundColor="#007AFF"
|
|
||||||
titleColor="#ffffff"
|
|
||||||
backIconColor="#ffffff"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例4: 隐藏返回按钮 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">隐藏返回按钮</view>
|
|
||||||
<TopNavBar title="无返回按钮" :showBack="false" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例5: 标题左对齐 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">标题左对齐</view>
|
|
||||||
<TopNavBar title="左对齐标题" titleAlign="left" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例6: 标题居中对齐（默认） -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">标题居中对齐（默认）</view>
|
|
||||||
<TopNavBar title="居中对齐标题" titleAlign="center" />
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例7: 使用插槽 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">使用插槽</view>
|
|
||||||
<TopNavBar>
|
|
||||||
<template #title>
|
|
||||||
<view class="custom-title">
|
|
||||||
<uni-icons type="star" size="16" color="#FFD700" />
|
|
||||||
<text class="title-text">自定义标题</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #right>
|
|
||||||
<view class="right-actions">
|
|
||||||
<uni-icons type="search" size="20" color="#333" style="margin-right: 10px;" />
|
|
||||||
<uni-icons type="more" size="20" color="#333" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 示例8: 渐变背景 -->
|
|
||||||
<view class="demo-section">
|
|
||||||
<view class="demo-title">渐变背景</view>
|
|
||||||
<TopNavBar
|
|
||||||
title="渐变导航栏"
|
|
||||||
backgroundColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
|
|
||||||
titleColor="#ffffff"
|
|
||||||
backIconColor="#ffffff"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 内容区域 -->
|
|
||||||
<view class="content-area">
|
|
||||||
<view class="content-item" v-for="i in 20" :key="i">
|
|
||||||
<text>内容项 {{ i }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import TopNavBar from './index.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.demo-container {
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-section {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-title {
|
|
||||||
padding: 15px 20px;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
border-bottom: 1px solid #e9ecef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.title-text {
|
|
||||||
margin-left: 8px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-area {
|
|
||||||
margin-top: 40px;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-item {
|
|
||||||
padding: 15px 0;
|
|
||||||
border-bottom: 1px solid #f0f0f0;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -155,12 +155,10 @@ const handleBack = () => {
|
|||||||
const pages = getCurrentPages();
|
const pages = getCurrentPages();
|
||||||
|
|
||||||
if (pages.length <= 1) {
|
if (pages.length <= 1) {
|
||||||
// #ifdef MP-WEIXIN
|
uni.reLaunch({
|
||||||
if (typeof wx !== "undefined" && typeof wx.exitMiniProgram === "function") {
|
url: "/pages/index/index",
|
||||||
wx.exitMiniProgram();
|
});
|
||||||
return;
|
return;
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (hasBackListener.value) {
|
if (hasBackListener.value) {
|
||||||
|
|||||||
@@ -1,312 +0,0 @@
|
|||||||
# TopNavBar 组件使用指南
|
|
||||||
|
|
||||||
## 组件概述
|
|
||||||
|
|
||||||
TopNavBar 是一个功能完整的顶部导航栏组件，专为 uni-app 项目设计。该组件支持固定定位、自定义样式、插槽内容等功能，可以满足大部分页面的导航需求。
|
|
||||||
|
|
||||||
## 核心特性
|
|
||||||
|
|
||||||
### 1. 可配置固定定位
|
|
||||||
- **默认行为**: 组件默认不固定，跟随页面滚动
|
|
||||||
- **固定模式**: 设置 `fixed="true"` 可将导航栏固定在页面顶部
|
|
||||||
- **自动适配**: 固定模式下自动处理状态栏高度和安全区域
|
|
||||||
|
|
||||||
### 2. 智能状态栏适配
|
|
||||||
- 自动获取系统状态栏高度
|
|
||||||
- 支持不同平台的导航栏高度适配（iOS: 44px, Android: 48px）
|
|
||||||
- 可选择隐藏状态栏占位区域
|
|
||||||
|
|
||||||
### 3. 灵活的自定义选项
|
|
||||||
- 支持自定义背景色、标题色、图标色
|
|
||||||
- 可控制返回按钮显示/隐藏
|
|
||||||
- 支持自定义 z-index 层级
|
|
||||||
- 支持标题对齐方式配置（居中/左对齐）
|
|
||||||
|
|
||||||
## 快速开始
|
|
||||||
|
|
||||||
### 基础使用
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<!-- 最简单的使用方式 -->
|
|
||||||
<TopNavBar title="页面标题" />
|
|
||||||
```
|
|
||||||
|
|
||||||
### 固定在顶部
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<!-- 固定导航栏，适合长页面滚动 -->
|
|
||||||
<template>
|
|
||||||
<view class="page-container">
|
|
||||||
<TopNavBar title="商品详情" :fixed="true" />
|
|
||||||
<view class="page-content">
|
|
||||||
<!-- 页面内容 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.page-content {
|
|
||||||
/* 为固定导航栏预留空间 */
|
|
||||||
padding-top: calc(var(--status-bar-height, 44px) + 44px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 自定义样式
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<!-- 深色主题导航栏 -->
|
|
||||||
<TopNavBar
|
|
||||||
title="深色导航栏"
|
|
||||||
backgroundColor="#1a1a1a"
|
|
||||||
titleColor="#ffffff"
|
|
||||||
backIconColor="#ffffff"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 品牌色导航栏 -->
|
|
||||||
<TopNavBar
|
|
||||||
title="品牌导航栏"
|
|
||||||
backgroundColor="#007AFF"
|
|
||||||
titleColor="#ffffff"
|
|
||||||
backIconColor="#ffffff"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 左对齐标题 -->
|
|
||||||
<TopNavBar
|
|
||||||
title="左对齐标题"
|
|
||||||
titleAlign="left"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- 居中标题（默认） -->
|
|
||||||
<TopNavBar
|
|
||||||
title="居中标题"
|
|
||||||
titleAlign="center"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 高级用法
|
|
||||||
|
|
||||||
### 使用插槽自定义内容
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<TopNavBar>
|
|
||||||
<!-- 自定义标题区域 -->
|
|
||||||
<template #title>
|
|
||||||
<view class="custom-title">
|
|
||||||
<image src="/static/logo.png" class="logo" />
|
|
||||||
<text class="brand-name">品牌名称</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义右侧操作 -->
|
|
||||||
<template #right>
|
|
||||||
<view class="nav-actions">
|
|
||||||
<uni-icons type="search" size="20" @click="handleSearch" />
|
|
||||||
<uni-icons type="more" size="20" @click="showMore" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.custom-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-name {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 监听返回事件
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<TopNavBar
|
|
||||||
title="自定义返回"
|
|
||||||
@back="handleCustomBack"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const handleCustomBack = () => {
|
|
||||||
// 自定义返回逻辑
|
|
||||||
uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: '确定要离开当前页面吗？',
|
|
||||||
success: (res) => {
|
|
||||||
if (res.confirm) {
|
|
||||||
uni.navigateBack()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 实际应用场景
|
|
||||||
|
|
||||||
### 1. 商品详情页
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view class="goods-detail">
|
|
||||||
<TopNavBar
|
|
||||||
title="商品详情"
|
|
||||||
:fixed="true"
|
|
||||||
backgroundColor="rgba(255, 255, 255, 0.95)"
|
|
||||||
>
|
|
||||||
<template #right>
|
|
||||||
<uni-icons type="share" size="20" @click="shareGoods" />
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
|
|
||||||
<view class="goods-content">
|
|
||||||
<!-- 商品内容 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 订单列表页
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view class="order-list">
|
|
||||||
<TopNavBar>
|
|
||||||
<template #title>
|
|
||||||
<Tabs
|
|
||||||
:tabs="orderTabs"
|
|
||||||
:active="activeTab"
|
|
||||||
@change="switchTab"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
|
|
||||||
<view class="order-content">
|
|
||||||
<!-- 订单列表 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 聊天页面
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<template>
|
|
||||||
<view class="chat-page">
|
|
||||||
<TopNavBar
|
|
||||||
title="客服小沐"
|
|
||||||
:fixed="true"
|
|
||||||
backgroundColor="#f8f9fa"
|
|
||||||
>
|
|
||||||
<template #right>
|
|
||||||
<uni-icons type="phone" size="20" @click="makeCall" />
|
|
||||||
</template>
|
|
||||||
</TopNavBar>
|
|
||||||
|
|
||||||
<view class="chat-content">
|
|
||||||
<!-- 聊天内容 -->
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 最佳实践
|
|
||||||
|
|
||||||
### 1. 固定导航栏的页面布局
|
|
||||||
|
|
||||||
```scss
|
|
||||||
// 推荐的页面结构
|
|
||||||
.page-container {
|
|
||||||
.page-content {
|
|
||||||
// 方法1: 使用 padding-top
|
|
||||||
padding-top: calc(var(--status-bar-height, 44px) + 44px);
|
|
||||||
|
|
||||||
// 方法2: 使用 margin-top
|
|
||||||
// margin-top: calc(var(--status-bar-height, 44px) + 44px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. 响应式设计
|
|
||||||
|
|
||||||
```scss
|
|
||||||
// 适配不同屏幕尺寸
|
|
||||||
@media screen and (max-width: 375px) {
|
|
||||||
.page-content {
|
|
||||||
padding-top: calc(var(--status-bar-height, 44px) + 40px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. 主题适配
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue'
|
|
||||||
|
|
||||||
// 根据系统主题动态调整颜色
|
|
||||||
const navBarStyle = computed(() => {
|
|
||||||
const isDark = uni.getSystemInfoSync().theme === 'dark'
|
|
||||||
return {
|
|
||||||
backgroundColor: isDark ? '#1a1a1a' : '#ffffff',
|
|
||||||
titleColor: isDark ? '#ffffff' : '#333333',
|
|
||||||
backIconColor: isDark ? '#ffffff' : '#333333'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<TopNavBar
|
|
||||||
title="自适应主题"
|
|
||||||
:backgroundColor="navBarStyle.backgroundColor"
|
|
||||||
:titleColor="navBarStyle.titleColor"
|
|
||||||
:backIconColor="navBarStyle.backIconColor"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
```
|
|
||||||
|
|
||||||
## 注意事项
|
|
||||||
|
|
||||||
1. **固定定位的性能考虑**: 固定导航栏会创建新的层叠上下文，在复杂页面中可能影响性能
|
|
||||||
|
|
||||||
2. **状态栏适配**: 在不同设备上状态栏高度可能不同，组件会自动处理，但建议在测试时验证各种设备
|
|
||||||
|
|
||||||
3. **插槽内容**: 使用插槽时注意内容的响应式设计，确保在不同屏幕尺寸下都能正常显示
|
|
||||||
|
|
||||||
4. **z-index 管理**: 如果页面中有其他固定定位元素，注意调整 z-index 避免层级冲突
|
|
||||||
|
|
||||||
5. **返回按钮**: 默认返回行为是 `uni.navigateBack()`，如需自定义请监听 `@back` 事件
|
|
||||||
|
|
||||||
## 故障排除
|
|
||||||
|
|
||||||
### 常见问题
|
|
||||||
|
|
||||||
**Q: 固定导航栏下的内容被遮挡了？**
|
|
||||||
A: 需要为页面内容添加顶部间距，参考上面的最佳实践。
|
|
||||||
|
|
||||||
**Q: 在某些设备上状态栏高度不正确？**
|
|
||||||
A: 组件会自动获取状态栏高度，如果仍有问题，可以手动设置 `hideStatusBar="true"` 并自行处理。
|
|
||||||
|
|
||||||
**Q: 自定义颜色不生效？**
|
|
||||||
A: 确保传入的颜色值格式正确，支持 hex、rgb、rgba 等标准 CSS 颜色格式。
|
|
||||||
|
|
||||||
**Q: 插槽内容显示异常？**
|
|
||||||
A: 检查插槽内容的样式，确保没有影响导航栏布局的 CSS 属性。
|
|
||||||
Reference in New Issue
Block a user