微信小程序自定义导航栏组件

/* wxml */
<view class="custom-bar" style="margin-top: {{config.top}}px; height: {{config.height}}px;">
    <view class="nav-title">
        <slot name="nav-title"></slot>
    </view>
    <view class="title">
        <slot name="title"></slot>
    </view>
</view>

/* wxss */
.custom-bar {
    height: 60rpx;
    padding-left: 7px; /* 固定为 7 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    position: relative;
}

.custom-bar .nav-title {
    font-size: 24rpx;
}

.custom-bar .title {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* js */
Component({
    options: {
        multipleSlots: true
    },

    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        config: {}
    },

    ready() {
        const config = wx.getMenuButtonBoundingClientRect()
        this.setData({ config })
    },

    /**
     * 组件的方法列表
     */
    methods: {
    }
})