uniapp自定义导航栏配置及沉浸式处理
作者:互联网
备注:一般App里不会使用这个配置,建议个别页面单独设置不使用原生导航。
"globalStyle": {
"navigationStyle": "custom",
},
2. 单独去除原生导航栏
2.1App单独去除原生导航栏(方法一)
{
"path" : "pages/index/index",
"style" : {
"navigationBarTitleText": "首页",
"app-plus":{
"titleNView":false
}
}
}
2.2单页面去掉原生导航栏(方法二)
{
"path" : "pages/index/index",
"style" : {
"navigationStyle":"custom"
}
}
3.状态栏沉浸式处理
3.1配置mainfest.json来关闭沉浸式(方法一)
"app-plus" : {
"statusbar": {
"immersed": false
},
}
3.2页面加状态栏站位(方法二)
<template>
<view>
<!-- #ifdef APP-PLUS -->
<view class="status_bar">
<view class="top_view"></view>
</view>
<!-- #endif -->
<view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
.status_bar {
height: var(--status-bar-height);
width: 100%;
background-color: #F8F8F8;
}
.top_view {
height: var(--status-bar-height);
width: 100%;
position: fixed;
background-color: #F8F8F8;
top: 0;
z-index: 999;
}
</style>
标签:status,uniapp,bar,自定义,index,height,沉浸,原生,导航 来源: https://blog.csdn.net/qq285679784/article/details/120841153