uniapp中小程序自定义导航栏

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1、如果需要使用自定义导航栏的时候，需要在page.json文件中做如下更改

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/list/index",
            "style": {
                "navigationBarTitleText": "list",
                "navigationStyle":"custom"//添加自定义配置
            }
        },
        {
            "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);
        width: 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 {
        width: 100%;
        background: #007AFF;
        position: relative;
    }
    /* 调整状态栏标题的位置 */
    text{
        position: absolute;
        margin: auto;
        bottom:10px;
        left:0;
        right:0;
        text-align: center;
    }
</style>