在uni-app中，当设置navigationStyle为custom取消原生导航栏时，由于窗体为沉浸式，占据了状态栏位置。此时可以通过在页面顶部放置一个高度为var(--status-bar-height)的view来避免页面内容出现在状态栏。具体配置如下：
代码块//页面配置"path": "pages/index/index", "style": {"app-plus": { //app配置自定义导航 "titleNView": false //app禁止使用原生导航} }}, "globalStyle": { "navigationStyle":"custom",//禁用原生导航}
在页面部分或首页部分，可以添加以下代码：
代码块template view class="status_bar"!-- 这里是状态栏 --/view view class="box-fel" !--状态栏下的文字 -- viewimage style="width: 100rpx; height: 100rpx;" src="../../static/logo.png" /image /view view关注/view view发现/view view附近/view view搜索/view /view/template style lang="scss" .status_bar { height: var(--status-bar-height); width: 100%; }
需要注意的是，var(--status-bar-height)此变量在微信小程序环境为固定25px，在App里为手机实际状态栏高度。因此，当设置navigationStyle为custom取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为var(--status-bar-height)的view放在页面顶部，避免页面内容出现在状态栏。
对于H5端，不存在原生导航栏和tabbar，前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用--window-bottom，不管在哪个端，都是固定在tabbar上方。
目前nvue在App端还不支持--status-bar-height变量，可以使用uni.getSystemInfoSync().statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度。
对于uni-app如何动态设置页面标题，可以参考以下步骤：
1. 新建页面
正常情况下，在创建页面时会在pages.json里生成一段代码即可在内调整页面的标题。如图：效果如图：这种方式可已满足大多数人的需求，但是总有那么一些人需求比较不同。希望能够在页面内进行动态的调整标题，那么该如何进行设置呢？
2. js动态修改标题
代码如下：
代码块scriptexport default {data() {return {dynamicTitle: '这里是动态标题',};},onLoad() {// 官网API：
https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitleuni.setNavigationBarTitle({title: this.dynamicTitle,success: () = {console.log('修改标题成功')},fail: () = {console.log('修改标题失败')},complete: () = {console.log('修改标题结束')},})}}
效果如图：
到此这篇关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的文章就介绍到这了，更多相关uni-app自定义顶部标题栏内容请继续浏览下面的相关文章。