130 lines
3.4 KiB
TypeScript
130 lines
3.4 KiB
TypeScript
import { logger } from '../../utils/logger'
|
|
|
|
// 日志模块名
|
|
const LOG = 'navigation-bar'
|
|
|
|
Component({
|
|
options: {
|
|
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
|
},
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
extClass: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
title: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
background: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
color: {
|
|
type: String,
|
|
value: ''
|
|
},
|
|
back: {
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
value: false
|
|
},
|
|
homeButton: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
animated: {
|
|
// 显示隐藏的时候opacity动画效果
|
|
type: Boolean,
|
|
value: true
|
|
},
|
|
show: {
|
|
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
|
type: Boolean,
|
|
value: true,
|
|
observer: '_showChange'
|
|
},
|
|
// back为true的时候，返回的页面深度
|
|
delta: {
|
|
type: Number,
|
|
value: 1
|
|
},
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
displayStyle: '',
|
|
ios: false,
|
|
innerPaddingRight: '',
|
|
leftWidth: '',
|
|
safeAreaTop: ''
|
|
},
|
|
lifetimes: {
|
|
attached() {
|
|
const rect = wx.getMenuButtonBoundingClientRect()
|
|
const apply = (windowWidth: number, platform: string, safeTop: number) => {
|
|
const isAndroid = platform === 'android'
|
|
const isDevtools = platform === 'devtools'
|
|
this.setData({
|
|
ios: !isAndroid,
|
|
innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`,
|
|
leftWidth: `width: ${windowWidth - rect.left}px`,
|
|
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${safeTop}px); padding-top: ${safeTop}px` : ``
|
|
})
|
|
}
|
|
|
|
// wx.getSystemInfo 已废弃（基础库 2.20.1+ 拆分接口），改用同步的 window/device 接口
|
|
const wxAny = wx as any
|
|
if (typeof wxAny.getWindowInfo === 'function') {
|
|
const win = wxAny.getWindowInfo()
|
|
const dev = typeof wxAny.getDeviceInfo === 'function' ? wxAny.getDeviceInfo() : {}
|
|
apply(win.windowWidth, dev.platform || win.platform || '', win.safeArea ? win.safeArea.top : 0)
|
|
logger.debug(LOG, '布局计算完成, 窗口宽=', win.windowWidth, '平台=', dev.platform || win.platform)
|
|
return
|
|
}
|
|
// 低版本基础库走废弃接口兜底
|
|
logger.warn(LOG, 'getWindowInfo 不可用，降级到已废弃的 wx.getSystemInfo')
|
|
wx.getSystemInfo({
|
|
success: (res) => apply(res.windowWidth, res.platform, res.safeArea ? res.safeArea.top : 0)
|
|
})
|
|
},
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
_showChange(show: boolean) {
|
|
const animated = this.data.animated
|
|
let displayStyle = ''
|
|
if (animated) {
|
|
displayStyle = `opacity: ${
|
|
show ? '1' : '0'
|
|
};transition:opacity 0.5s;`
|
|
} else {
|
|
displayStyle = `display: ${show ? '' : 'none'}`
|
|
}
|
|
this.setData({
|
|
displayStyle
|
|
})
|
|
},
|
|
back() {
|
|
const data = this.data
|
|
if (data.delta) {
|
|
logger.debug(LOG, '返回上一页, delta=', data.delta)
|
|
wx.navigateBack({
|
|
delta: data.delta,
|
|
fail: (e) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg)
|
|
})
|
|
}
|
|
this.triggerEvent('back', { delta: data.delta }, {})
|
|
}
|
|
},
|
|
})
|