1、如果需要使用自定義導航欄的時候，需要在page.json文件中做如下更改

"pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/list/index",
            "style": {
                "navigationBarTitleText": "list",
                "navigationStyle":"custom"http://添加自定義配置
            }
        },
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "home"
            }
        }
    ],

2、配置完成之后，自定義導航有如下寫法

1）固定的狀態欄高度，此時iphonex等手機不建議使用

<template>
    <view>
        <view class="status_bar">
            <!-- 這里是狀態欄 -->
        </view>
        <view> 狀態欄下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
         100%;
        background: red;
    }
</style>

2)自定義寫法，根據對應機型自行調整，所有機型都可使用

<template>
    <view>
        <!-- 假設我需要狀態欄到文字內容部分還有50px的距離 -->
        <view class="status_bar" :style="{height:height+50+'px'}">
            <text>list</text>
        </view>
        <view> 狀態欄下的文字 </view>
    </view>
</template>  

<script>
    export default{
        data(){
            return {
                height:null,//獲取的狀態欄高度
            }
        },
        onLoad(){
            var _this=this;
            // 獲取手機狀態欄高度
            uni.getSystemInfo({
                success:function(data){
                    // 將其賦值給this
                    _this.height=data.statusBarHeight;
                }
            })
        },
    }
</script>

<style>
    .status_bar {
         100%;
        background: #007AFF;
        position: relative;
    }
    /* 調整狀態欄標題的位置 */
    text{
        position: absolute;
        margin: auto;
        bottom:10px;
        left:0;
        right:0;
        text-align: center;
    }
</style>

總結

以上是生活随笔為你收集整理的uniapp中小程序自定义导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。