微信小程序—标题栏

<template>
    <view :style="{paddingTop: statusBarHeight + 'px',background:bg}" class="box">
        <view :style="{width: titleBarWidth + 'px', height: titleBarHeight + 'px'}">
            <slot name="parent" :menuButtonHeight="menuButtonHeight" :titleBarHeight="titleBarHeight"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: "titleBar",
        data() {
            return {
                statusBarHeight: 0,
                menuButtonHeight: 0,
                titleBarWidth: 0,
                titleBarHeight: 0,
            }
        },
        props: ['bg'],
        created() {
            this.statusBarHeight = uni.getStorageSync("statusBarHeight");
            this.menuButtonHeight = uni.getStorageSync("menuButtonHeight");
            this.titleBarWidth = uni.getStorageSync("titleBarWidth");
            this.titleBarHeight = uni.getStorageSync("titleBarHeight");
        },
        onReady() {
            uni.setStorageSync('statusBarHeight', uni.getSystemInfoSync().statusBarHeight);
            uni.setStorageSync('menuButtonHeight', uni.getMenuButtonBoundingClientRect().height);
            uni.setStorageSync('titleBarWidth', uni.getSystemInfoSync().windowWidth - uni.getMenuButtonBoundingClientRect()
                .width -
                (uni.getSystemInfoSync().windowWidth - uni.getMenuButtonBoundingClientRect().right) * 2);
            uni.setStorageSync('titleBarHeight', (uni.getMenuButtonBoundingClientRect().top - uni.getStorageSync(
                "statusBarHeight")) * 2 + uni.getStorageSync("menuButtonHeight"));
            if (!this.menuButtonHeight) {
                this.statusBarHeight = uni.getStorageSync("statusBarHeight");
                this.menuButtonHeight = uni.getStorageSync("menuButtonHeight");
                this.titleBarWidth = uni.getStorageSync("titleBarWidth");
                this.titleBarHeight = uni.getStorageSync("titleBarHeight");
            }
        }
    }
</script>


<style>
    .box {
        position: sticky;
        top: 0rpx;
        z-index: 999;
    }
</style>

 效果：

 

<titleBar bg="#f6f6f6">
     <template v-slot:parent>
          <view class="xbox">
             服务内容
          </view>
      </template>
</titleBar>

.xbox{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }