Remarks: Generally, this configuration will not be used in the App, and it is recommended that individual pages be set separately without using native navigation.
"globalStyle": {
"navigationStyle": "custom",
},
2. Remove the native navigation bar separately
2.1 App removes the native navigation bar alone (method 1)
{
"path" : "pages/index/index",
"style" : {
"navigationBarTitleText": "首页",
"app-plus":{
"titleNView":false
}
}
}
2.2 Remove the native navigation bar from a single page (method 2)
{
"path" : "pages/index/index",
"style" : {
"navigationStyle":"custom"
}
}
3. Immersive processing of the status bar
3.1 Configure mainfest.json to turn off immersive (method 1)
"app-plus" : {
"statusbar": {
"immersed": false
},
}
3.2 Add status bar to the page (method 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>