107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
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: '',
|
|
},
|
|
lifetimes: {
|
|
attached() {
|
|
const rect = wx.getMenuButtonBoundingClientRect();
|
|
wx.getSystemInfo({
|
|
success: (res) => {
|
|
const isAndroid = res.platform === 'android';
|
|
const isDevtools = res.platform === 'devtools';
|
|
this.setData({
|
|
ios: !isAndroid,
|
|
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
|
|
leftWidth: `width: ${res.windowWidth - rect.left}px`,
|
|
safeAreaTop:
|
|
isDevtools || isAndroid
|
|
? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px`
|
|
: ``,
|
|
});
|
|
},
|
|
});
|
|
},
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
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) {
|
|
wx.navigateBack({
|
|
delta: data.delta,
|
|
});
|
|
}
|
|
this.triggerEvent('back', { delta: data.delta }, {});
|
|
},
|
|
},
|
|
});
|