uni-app配置APP自定義頂部標(biāo)題欄設(shè)置方法與注意事項

更新時間：2022年07月29日 15:46:07 作者：企鵝-菜鳥

相信很多小伙伴在使用uniapp進行多端開發(fā)的時候,在面對一些業(yè)務(wù)需求的時候,uniapp給我們提供的默認(rèn)導(dǎo)航欄已經(jīng)不能滿足我們的業(yè)務(wù)需求了,這篇文章主要給大家介紹了關(guān)于uni-app配置APP自定義頂部標(biāo)題欄設(shè)置方法與注意事項的相關(guān)資料,需要的朋友可以參考下

pages.json文件

代碼塊

//頁面配置
"path": "pages/index/index",
        "style": {
            "app-plus": { //app配置自定義導(dǎo)航
                "titleNView": false //app禁止使用原神導(dǎo)航
            }
        }
},
 
"globalStyle": {
 
        "navigationStyle":"custom",//禁用原生導(dǎo)航
        
    }

頁面部分或首頁部分

代碼塊

<template>
    <view class="status_bar"><!-- 這里是狀態(tài)欄 --></view>
    <view class="box-fel">
    <!--狀態(tài)欄下的文字 -->
        <view>
            <image style="width: 100rpx; height: 100rpx;" src="../../static/logo.png">        </image>
        </view>
        <view>關(guān)注</view>
        <view>發(fā)現(xiàn)</view>
        <view>附近</view>
        <view>搜索</view>
    </view>
</template>
 
<style lang="scss">
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>

注意：

var(--status-bar-height) 此變量在微信小程序環(huán)境為固定 25px，在 App 里為手機實際狀態(tài)欄高度。
當(dāng)設(shè)置 "navigationStyle":"custom" 取消原生導(dǎo)航欄后，由于窗體為沉浸式，占據(jù)了狀態(tài)欄位置。此時可以使用一個高度為 var(--status-bar-height) 的 view 放在頁面頂部，避免頁面內(nèi)容出現(xiàn)在狀態(tài)欄。
由于在 H5 端，不存在原生導(dǎo)航欄和 tabbar，也是前端 div 模擬。如果設(shè)置了一個固定位置的居底 view，在小程序和 App 端是在 tabbar 上方，但在 H5 端會與 tabbar 重疊。此時可使用--window-bottom，不管在哪個端，都是固定在 tabbar 上方。
目前 nvue 在 App 端，還不支持 --status-bar-height變量，替代方案是在頁面 onLoad 時通過 uni.getSystemInfoSync().statusBarHeight 獲取狀態(tài)欄高度，然后通過 style 綁定方式給占位 view 設(shè)定高度。

附：uni-app如何動態(tài)設(shè)置頁面的標(biāo)題

1. 新建頁面

正常情況下，在創(chuàng)建頁面時會在pages.json里生成一段代碼，即可在內(nèi)調(diào)整頁面的標(biāo)題。如圖：

效果如圖：

這種方式可已滿足大多數(shù)人的需求，但是總有那么一些人需求比較不同。希望能夠在頁面內(nèi)進行動態(tài)的調(diào)整標(biāo)題，那么該如何進行設(shè)置呢？

2. js動態(tài)修改標(biāo)題

代碼如下：

<script>
	export default {
		data() {
			return {
				dynamicTitle: '這里是動態(tài)標(biāo)題',
			};
		},
		onLoad() {
			// 官網(wǎng)API：https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle
			uni.setNavigationBarTitle({
				title: this.dynamicTitle,
				success: () => {
					console.log('修改標(biāo)題成功')
				},
				fail: () => {
					console.log('修改標(biāo)題失敗')
				},
				complete: () => {
					console.log('修改標(biāo)題結(jié)束')
				},
			})
		}
	}
</script>

效果如圖：