115 lines
2.1 KiB
Vue
115 lines
2.1 KiB
Vue
<template>
|
|
<view class="nav-header">
|
|
<uni-nav-bar :color="color" :backgroundColor="backgroundColor" :fixed="fixed" :statusBar="statusBar"
|
|
:border="border">
|
|
<template #left>
|
|
<view v-if="showBack" class="nav-header__back" @click="goBack">
|
|
<uni-icons :color="color" type="left" size="20" />
|
|
</view>
|
|
</template>
|
|
<view style="font-size: 34rpx; width: 100%; display: flex; justify-content: center; align-items: center;">
|
|
{{ title }}
|
|
</view>
|
|
</uni-nav-bar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NavHeader',
|
|
props: {
|
|
// 标题文字
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 是否显示返回按钮
|
|
showBack: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 返回页面路径，不传则返回上一页
|
|
backUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 文字颜色
|
|
color: {
|
|
type: String,
|
|
default: '#000000'
|
|
},
|
|
// 背景颜色
|
|
backgroundColor: {
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
// 是否固定在顶部
|
|
fixed: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否包含状态栏
|
|
statusBar: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否显示底部边框
|
|
border: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回页面
|
|
goBack() {
|
|
if (this.backUrl) {
|
|
// 如果指定了返回页面路径，则跳转到指定页面
|
|
uni.redirectTo({
|
|
url: this.backUrl,
|
|
success: () => {
|
|
|
|
},
|
|
fail: (err) => {
|
|
console.log('返回页面失败', err);
|
|
uni.switchTab({
|
|
url: this.backUrl,
|
|
success: () => {
|
|
|
|
},
|
|
fail: (err) => {
|
|
console.log('返回页面失败1', err);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
} else {
|
|
var pages = getCurrentPages();
|
|
if (pages.length > 1) {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
fail: (err) => {
|
|
console.log('返回页面失败2', err);
|
|
}
|
|
});
|
|
} else {
|
|
uni.switchTab({
|
|
url: '/pages/shouye/index',
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.nav-header {
|
|
&__back {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44px;
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
</style> |