uni-app自定义导航栏

一开始以为uni-app想自定义导航是需要像原生小程序那样子实现的，但看了一下文档发现并不是，只需要在pages.json里面修改app-plus
详情：app-plus
需要注意的是，经过测试，目前好像只有app端、H5有用。小程序没作用
小程序想自定义头部的话请跳过这段。往下拉

app端、H5实现自定义头部

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "navigationBarBackgroundColor": "#00c170",
                "app-plus": {
                    "bounce": "none",
                    "titleNView": {
                        "buttons": [ 
                            {
                                "text": "左边", 
                                "fontSize":"16",
                                "float": "right",
                                "color":"#fff"
                            },
                            {
                                "text": "右边", 
                                "fontSize":"16",
                                "float": "left",
                                "color":"#fff"
                            }
                        ]
                    }
                }
            }
        }
    ]
}

小程序如何自定义头部
两种做法
1和原生小程序一样实现
2在uni-app市场里面找到一款叫NavBar 导航栏的组件
以下以NavBar 导航栏组件解决方案

先去掉小程序的默认标题

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        }
    ],
    "globalStyle": {
        "navigationStyle": "custom"
    }
}

在页面里面

<template>
    <view class="content">
        <uni-nav-bar left-icon="back" left-text="右边的文字" title="首页" background-color="#00c170" color="#fff"></uni-nav-bar>
    </view>
</template>

<script>
    import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
    export default {
        components:{
            uniNavBar
        }
    }
</script>
```![在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xODc0OTkzNS0xZjA1NmQwYzlhOGM1MmQ5LnBuZw?x-oss-process=image/format,png)