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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容