<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; }
标签:statusBarHeight,微信,标题栏,程序,titleBarHeight,getStorageSync,titleBarWidth,menuButton From: https://www.cnblogs.com/laremehpe/p/16951553.html