uniapp自定义导航栏适配
时间: 2023-10-28 09:07:12 浏览: 53
uniapp自定义导航栏适配可以通过以下步骤实现:
1. 在 App.vue 中设置全局导航栏高度,例如:
```
<style>
.custom-nav {
height: 44px;
}
</style>
```
2. 在需要自定义导航栏的页面中,使用 `uni.getSystemInfoSync()` 获取系统信息,计算出状态栏高度和导航栏高度,例如:
```
<template>
<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
<view class="nav-bar">
<view class="nav-bar__left">
<text class="nav-bar__text">返回</text>
</view>
<view class="nav-bar__title">
<text class="nav-bar__text">自定义导航栏</text>
</view>
<view class="nav-bar__right">
<text class="nav-bar__text">更多</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusBarHeight: 0
}
},
onLoad() {
const systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = systemInfo.statusBarHeight
}
}
</script>
<style>
.custom-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: #fff;
}
.nav-bar {
display: flex;
align-items: center;
height: 44px;
padding: 0 15px;
}
.nav-bar__left,
.nav-bar__right {
width: 60px;
text-align: center;
}
.nav-bar__title {
flex: 1;
text-align: center;
}
.nav-bar__text {
font-size: 16px;
color: #333;
}
</style>
```