小程序自定義頂部導航欄

實現的前提

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>