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'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|