uniapp底部导航栏不显示
时间: 2023-09-16 16:06:53 浏览: 197
在uni-app中,如果你不希望底部导航栏显示,有两种方法可以实现。第一种方法是将页面的navigationStyle设为custom,第二种方法是将页面的titleNView设为false。具体的配置可以通过修改pages.json文件来实现。以下是一个示例:
```json
"pages" : [
{
"path" : "pages/index/index",
"style": {
"navigationBarTitleText": "英特网络",
"navigationStyle":"custom"
}
},
]
```
在上述示例中,我们将navigationStyle设为custom,这样底部导航栏就不会显示了。你也可以将titleNView设为false来达到同样的效果。
另外,如果你想要让页面内容不被手机顶部的状态栏区域覆盖,你可以使用uni-app提供的状态栏高度的css变量--status-bar-height。通过设置一个占位div,并将其高度设为css变量,你可以让页面内容下移,避免被状态栏遮挡。
```html
<template>
<view>
<view class="status_bar">
<!-- 这里是状态栏 -->
</view>
<view>
状态栏下的文字
</view>
</view>
</template>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
}
</style>
```
在上述示例中,我们通过设置一个高度为--status-bar-height的占位div,将状态栏的位置让出来,使页面内容不被状态栏覆盖。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [uni-app 设置原生导航栏不显示](https://blog.csdn.net/weixin_44640323/article/details/109114171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]
阅读全文