91 lines
1.6 KiB
Vue
91 lines
1.6 KiB
Vue
<template>
|
||
<view class="header">
|
||
<view class="header-content">
|
||
<view class="left" @click="goBack">
|
||
<u-icon name="arrow-left" color="#fff" size="36rpx"></u-icon>
|
||
</view>
|
||
<view class="center">
|
||
<text class="title">{{ title }}</text>
|
||
</view>
|
||
<view class="right">
|
||
<!-- 右侧占位 -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '标题'
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
let pages = getCurrentPages(); // 获取页面栈
|
||
console.log("-----pages",pages)
|
||
if (pages.length > 1) {
|
||
// 如果页面栈深度大于 1，说明可以返回上一页
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
} else {
|
||
// 如果已经是首页，可以选择跳转到某个指定页面或不做任何操作
|
||
uni.showToast({
|
||
title: '已经是首页了',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.header {
|
||
background-color: transparent;
|
||
/* 蓝色背景 */
|
||
padding: 20rpx 30rpx;
|
||
position: fixed;
|
||
top: 90rpx;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 999;
|
||
|
||
.header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.back-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.center {
|
||
flex: 2;
|
||
text-align: center;
|
||
|
||
.title {
|
||
color: #2e2e2e;
|
||
font-size: 36rpx;
|
||
// font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
</style> |