95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
|
// 头部高度混入
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
headerHeight: 88, // 默认高度
|
||
|
|
statusBarHeight: 0,
|
||
|
|
navBarHeight: 44
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mounted() {
|
||
|
|
this.initHeaderHeight()
|
||
|
|
this.listenHeaderHeightUpdate()
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeDestroy() {
|
||
|
|
// 移除事件监听
|
||
|
|
uni.$off('header-height-updated', this.onHeaderHeightUpdated)
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
// 初始化头部高度
|
||
|
|
initHeaderHeight() {
|
||
|
|
try {
|
||
|
|
const app = getApp()
|
||
|
|
if (app && app.globalData) {
|
||
|
|
this.headerHeight = app.globalData.headerHeight || 88
|
||
|
|
this.statusBarHeight = app.globalData.statusBarHeight || 0
|
||
|
|
this.navBarHeight = app.globalData.navBarHeight || 44
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
console.warn('获取全局头部高度失败:', e)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 如果没有全局数据，则计算头部高度
|
||
|
|
if (!this.headerHeight || this.headerHeight === 88) {
|
||
|
|
this.calculateHeaderHeight()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 计算头部高度
|
||
|
|
calculateHeaderHeight() {
|
||
|
|
const systemInfo = uni.getSystemInfoSync()
|
||
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
||
|
|
|
||
|
|
// #ifdef MP-WEIXIN
|
||
|
|
try {
|
||
|
|
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
|
|
if (menuButtonInfo) {
|
||
|
|
const topGap = menuButtonInfo.top - this.statusBarHeight
|
||
|
|
const bottomGap = topGap
|
||
|
|
this.navBarHeight = topGap + menuButtonInfo.height + bottomGap
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
console.warn('获取胶囊按钮信息失败:', e)
|
||
|
|
this.navBarHeight = 44
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
this.navBarHeight = 44
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef H5
|
||
|
|
this.navBarHeight = 44
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// 确保最小高度
|
||
|
|
if (this.navBarHeight < 44) {
|
||
|
|
this.navBarHeight = 44
|
||
|
|
}
|
||
|
|
|
||
|
|
this.headerHeight = this.statusBarHeight + this.navBarHeight
|
||
|
|
},
|
||
|
|
|
||
|
|
// 监听头部高度更新
|
||
|
|
listenHeaderHeightUpdate() {
|
||
|
|
uni.$on('header-height-updated', this.onHeaderHeightUpdated)
|
||
|
|
},
|
||
|
|
|
||
|
|
// 处理头部高度更新事件
|
||
|
|
onHeaderHeightUpdated(data) {
|
||
|
|
this.headerHeight = data.headerHeight
|
||
|
|
this.statusBarHeight = data.statusBarHeight
|
||
|
|
this.navBarHeight = data.navBarHeight
|
||
|
|
},
|
||
|
|
|
||
|
|
// 获取页面内容的样式
|
||
|
|
getPageContentStyle() {
|
||
|
|
return {
|
||
|
|
paddingTop: this.headerHeight + 'px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|