微信小程序自定义导航栏

效果图：

1，在page下创建组件

app.json中输入

2，组件中navigation-bar.wxml写入

<view class='nav' style='height: {{status + navHeight}}px'>
    <view class='status' style='height: {{status}}px; {{containerStyle}}'></view>
    <view class='navbar' style='height:{{navHeight}}px; {{containerStyle}}'>
        <view class='back-icon' wx:if="{{backIcon}}" bindtap='back'>
            <image src='{{backIcon}}'></image>
        </view>
        <view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'>
            <image src='{{homeIcon}}'></image>
        </view>
        <view class='nav-icon' wx:if="{{titleImg}}">
            <image src='{{titleImg}}' style='{{iconStyle}}'></image>
        </view>
        <view class='nav-title' wx:if="{{titleText && !titleImg}}">
            <text style='{{textStyle}}'>{{titleText}}</text>
        </view>
    </view>
</view>

3，组件中navigation-bar.wxss写入

.navbar{
    position: relative;
}
.back-icon, .home-icon{
    width: 28px;
    height: 100%;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    display: flex;
}
.back-icon{
    left: 16px;
}
.home-icon{
    left: 44px
}
.back-icon image{
    width: 24px;
    height: 24px;
    margin: auto;
}
.home-icon image{
    width: 24px;
    height: 24px;
    margin: auto;
}
.nav-title, .nav-icon{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    font-size: 0;
    font-weight: bold;
}

4，组件中navigation-bar.js写入

    /**
     * 组件的属性列表
     */
    properties: {
        background: {
            type: String,
            value: 'rgba(255, 255, 255, 1)'
        },
        color: {
            type: String,
            value: 'rgba(0, 0, 0, 1)'
        },
        titleText: {
            type: String,
            value: '导航栏'
        },
        titleImg: {
            type: String,
            value: ''
        },
        backIcon: {
            type: String,
            value: ''
        },
        homeIcon: {
            type: String,
            value: ''
        },
        fontSize: {
            type: Number,
            value: 16
        },
        iconHeight: {
            type: Number,
            value: 19
        },
        iconWidth: {
            type: Number,
            value: 58
        }
    },
    data: {

    },
    attached: function () {
        var that = this;
        that.setNavSize();
        that.setStyle();
    },
    methods: {
        // 通过获取系统信息计算导航栏高度
        setNavSize: function () {
            var that = this
                , sysinfo = wx.getSystemInfoSync()
                , statusHeight = sysinfo.statusBarHeight
                , isiOS = sysinfo.system.indexOf('iOS') > -1
                , navHeight;
            if (!isiOS) {
                navHeight = 48;
            } else {
                navHeight = 44;
            }
            that.setData({
                status: statusHeight,
                navHeight: navHeight
            })
        },
        setStyle: function () {
            var that = this
                , containerStyle
                , textStyle
                , iconStyle;
            containerStyle = [
                'background:' + that.data.background
            ].join(';');
            textStyle = [
                'color:' + that.data.color,
                'font-size:' + that.data.fontSize + 'px'
            ].join(';');
            iconStyle = [
                'width: ' + that.data.iconWidth + 'px',
                'height: ' + that.data.iconHeight + 'px'
            ].join(';');
            that.setData({
                containerStyle: containerStyle,
                textStyle: textStyle,
                iconStyle: iconStyle
            })
        },
        // 返回事件
        back: function () {
            wx.navigateBack({
                delta: 1
            })
            this.triggerEvent('back', { back: 1 })
        },
        home: function () {
            //console.log(0)
            wx.switchTab({
                url: '/pages/index/index'
              })
            this.triggerEvent('home', {});
        }
    }
})

5，在页面文件json中写入

6，页面中使用

<!-- 订单详情页 -->
<navigation-bar title-text="门店安装详情" color="#fff" fontSize="18" back-icon="/order/back.png" homeIcon="/order/home.png" background="#81D8CF" bindback="back"></navigation-bar>