當(dāng)設(shè)置 "navigationStyle":"custom" 取消原生導(dǎo)航欄后，由于窗體為沉浸式，占據(jù)了狀態(tài)欄位置。此時(shí)可以使用一個(gè)高度為 var(--status-bar-height) 的 view 放在頁面頂部，避免頁面內(nèi)容出現(xiàn)在狀態(tài)欄

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

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

1. 新建頁面

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

效果如圖：

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

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

代碼如下：

<script>
	export default {
		data() {
			return {
				dynamicTitle: '這里是動(dòng)態(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>

效果如圖：

總結(jié) 

到此這篇關(guān)于uni-app配置APP自定義頂部標(biāo)題欄設(shè)置方法與注意事項(xiàng)的文章就介紹到這了,更多相關(guān)uni-app自定義頂部標(biāo)題欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論