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

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

2、配置完成之后，自定義導(dǎo)航有如下寫法

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

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

2)自定義寫法，根據(jù)對應(yīng)機型自行調(diào)整，所有機型都可使用

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。