76 lines
1.6 KiB
JavaScript
76 lines
1.6 KiB
JavaScript
|
// components/navbar/navbar.js
|
|||
|
|
Component({
|
|||
|
|
properties: {
|
|||
|
|
// 标题
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
value: ''
|
|||
|
|
},
|
|||
|
|
// 是否显示返回按钮
|
|||
|
|
showBack: {
|
|||
|
|
type: Boolean,
|
|||
|
|
value: true
|
|||
|
|
},
|
|||
|
|
// 返回按钮文字
|
|||
|
|
backText: {
|
|||
|
|
type: String,
|
|||
|
|
value: '返回'
|
|||
|
|
},
|
|||
|
|
// 背景色（支持渐变）
|
|||
|
|
background: {
|
|||
|
|
type: String,
|
|||
|
|
value: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
data: {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
menuButtonTop: 0,
|
|||
|
|
menuButtonHeight: 0,
|
|||
|
|
navbarHeight: 0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
lifetimes: {
|
|||
|
|
attached() {
|
|||
|
|
this.setNavBarInfo()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
// 设置导航栏信息
|
|||
|
|
setNavBarInfo() {
|
|||
|
|
const windowInfo = wx.getWindowInfo()
|
|||
|
|
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
|
|||
|
|
|
|||
|
|
const statusBarHeight = windowInfo.statusBarHeight
|
|||
|
|
const menuButtonTop = menuButtonInfo.top
|
|||
|
|
const menuButtonHeight = menuButtonInfo.height
|
|||
|
|
|
|||
|
|
// 导航栏总高度 = 胶囊按钮bottom + 胶囊按钮到顶部的距离
|
|||
|
|
const navbarHeight = menuButtonInfo.bottom + (menuButtonTop - statusBarHeight)
|
|||
|
|
|
|||
|
|
this.setData({
|
|||
|
|
statusBarHeight,
|
|||
|
|
menuButtonTop,
|
|||
|
|
menuButtonHeight,
|
|||
|
|
navbarHeight
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 返回按钮点击
|
|||
|
|
onBackTap() {
|
|||
|
|
this.triggerEvent('back')
|
|||
|
|
|
|||
|
|
// 如果没有监听back事件，默认返回上一页
|
|||
|
|
const pages = getCurrentPages()
|
|||
|
|
if (pages.length > 1) {
|
|||
|
|
wx.navigateBack()
|
|||
|
|
} else {
|
|||
|
|
wx.switchTab({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|