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

/* wxml */

    
        
    
    
        
    

/* 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: {
    }
})