小程序自定义顶部导航栏

实现的前提

1.首先查看文档，看文档里关于自定义导航栏是怎么规定的，有哪些限制；还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。
2.在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，只保留右上角胶囊状的按钮，如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"。

实现的步骤

1.自定义导航栏文本，是否显示返回，是否显示返回首页,导航栏高度；
2.statusBarHeight，用来获取手机状态栏的高度，调用wx.getSystemInfo获取，navigationBarHeight+默认的高度，这个是设定整个导航栏的高度；
3.还有注意的，在写样式距离和大小时建议都用px，因小程序右边的胶囊也是用的px，不是rpx；
4.因为自定义导航栏每个页面都要写，所以把导航栏封装了公共组件，这样只需要在每个页面引入即可。

1.效果图

2.组件结构navbar.wxml

<view class="custom" style="padding-top:{{ statusBarHeight }}px; background: {{ bg }};">
    <view class='title-container'>
        <view class='capsule' wx:if="{{ back || home }}">
            <view bindtap='back' wx:if="{{back}}">
                <label class='iconfont icon-back'></label>
            </view>
            <view bindtap='backHome' wx:if="{{home}}">
                <label class='iconfont icon-home'></label>
            </view>
        </view>
        <view class='title'>{{ navigationBarTitle }}</view>
    </view>
</view>
<view class="empty_custom" style="padding-top:{{ statusBarHeight }}px;"></view>

这里有个需注意的问题，就是一般会出现自定义导航栏，下拉页面，导航栏也随着会下拉，这种问题是因为设置fixed后页面元素整体上移了navigationBarHeight，所以在此组件里设置一个空白view元素占用最上面的navigationBarHeight这块高度

3.组件样式navbar.wxss

.custom{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 45px;
    background: #1d8be8;
    z-index: 999;
}

.title-container {
    height: 44px;
    display: flex;
    align-items: center;
    position: relative;
}

.capsule {
    margin-left: 10px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.capsule > view {
    width: 32px;
    height: 60%;
    position: relative;
}

.capsule image {
    width: 60%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.title {
    color: white;
    position: absolute;
    left: 104px;
    right: 104px;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@font-face {font-family: "iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPEAAsAAAAAB9AAAAN1AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDOIJoATYCJAMMCwgABCAFhG0HNRutBsiOw7ixa964mMQePKTt28smJyKGmFT8Q007E6+gYmbv2c9NxOK1mSAu/ct90xvvERKJkFbBQ9SQiZSykDDgcvxfic+zLJcxF82tCwOMAwps7EFWIAF5IKmg13SCL66HAMzxJhJRWHx46YmgcLsJQAwbLDKeSMWIGsgXmCIw7hirEIsxwlSbo90EFiWfFz+IF6agYSRxN6odsMV7Vj9bfnaVBt1Ap+zGsJ0dkCeBBCIBBaJHp7MVfxaJRGJuKgPD6cYoBNpWfl2HRGipjS/6w9NAGOPmWgIQiqgGny0DDgR8dr0ADQAJgDGggHnAOtAc55OI2EZhPHZvePbK0t7puQ+Oocs//bu/OJ5fbNTWOK14tLAQmx6kWJy454XFPI9VIyEfN+8N79291rl5ZfjF5b3f4fUr9zp7+x/cnJuZ2Zi5u9a4+3zg6cLyiqG+4tFl3rPLqua+hUsr+35i3bsLGq56nrcjyGnF656wC0tkq68olhTVCf9uJETHwCseL1/182Pqx/Kprd3/8/6v/51/cf1FXO+63XuTX8cH2l4/ZjZxcfDiO7Njl73fz+ljPq25cn3l5ummtsSV2QMHjH3JY5X/V7QmrsBAZP+AsqK/8Ss629b5pFXRTwu3gJU79yxbxk2NnXiU2T4Yq/n+eXF1zq/fvq+tzs4+9ce3d/OzXd7Ejwmnbx227L9mZl9ruDnlgb4kas8v86Lm9MID6AYlZHfik4nS8LO+wykV59DTJvOvqYUC4NmosilIppsxvRWXgF9ToABdV0LRwCplCAOh45bMuE27BuArHnRcrz2vl6udJueCwBSnAhomeEFiSiChaJEwwoJEGGNKDsyJoGSUBQ6MwY9QZkD4hQSAwJZD0LDmEiS23CIU7RWMcOYXjLEVEuY0C4c5LQgWg80LxiBDyEOfyTC4r2kIvoViaf45ikONccqShH6Njiv7IS46th7fQQOdLQaMnSAOxo0TYMAYU4di2gw1zYRRY0wFOeoMGkfWfEzMgK4XdfqO1D0xCnBAGAiEB+jDLcBgOEwMhKg6EWu8/xxEZIgGgzNQ1uS+BnFwkesH4ogmdgKxozQmlb3KJWO5QWTAOAgBYAAOJjpAMdkRzYuYAKO6WykgHESHQQtCFvPEcKUBU5Wd49X6860BzHGXkkITUijUoJE6Bvr05lSPBwAAAA==') format('woff2');
}
.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-home:before { content: "\e60c"; }
.icon-back:before { content: "\e618"; }

4.设置组件参数navbar.json

{
    "component": true,
    "usingComponents": {}
}

5.组件navbar.js

Component({
    // 组件的属性列表
    properties: {
        //  导航文字
        navigationBarTitle: {
            type: String,
            value: ''
        },
        // 返回上一页
        back: {
            type: Boolean,
            value: false
        },
        // 返回首页
        home: {
            type: Boolean,
            value: false
        },
        // 背景色
        bg: {
            type: String,
            value: ''
        }
    },
    // 组件的初始数据
    data: {
        // 获取状态栏的高度statusBarHeight
        statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']
    },
    // 组件的方法列表
    methods: {
        // 返回首页
        backHome: function () {
            wx.reLaunch({
                url: '/pages/study/study',
            })
        },
        // 返回上一页
        back: function () {
            wx.navigateBack({
                delta: 1
            })
        }
    }
})

6.调用组件的页面.json

{
    "usingComponents": {
        "navBar": "/component/navbar/navbar"
    },
    // navigationStyle可以统一配置在app.json中
    "navigationStyle": "custom"
}

7.调用组件的页面.wxml

<navBar back home navigationBarTitle="测试结果" bg="rgb(138,103,255)"></navBar>