MiniPrograms/components/top-return/top-return.vue

<!-- 头部返回按钮组件 -->
<template>
	<view class="back" :style="{height: capsuleHeight+ 'px',top:capsuleTop+'px'}">
		<view v-if="!refresh">
			<u-icon name="arrow-left" v-if="show === 'back'" :color="color" size="24" @click="backIconHandler"></u-icon>
			<u-icon name="home-fill" v-if="show === 'home'" :color="color" size="24" @click="backHomeHandler"></u-icon>
		</view>
		
		<view v-if="refresh">
			<u-icon name="arrow-left" v-if="show === 'back'" :color="color" size="24" @click="backIconHandlerRefresh"></u-icon>
			<u-icon name="home-fill" v-if="show === 'home'" :color="color" size="24" @click="backIconHandlerRefresh"></u-icon>
		</view>
		<view class="back-text" :style="{color: color}">{{ text }}</view>
	</view>
</template>

<script>
	export default {
		name: "top-return",
		props: {
			text: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#303133'
			},
			show: {
				type: String,
				default: 'back'
			},
			refresh: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				//胶囊
				capsuleHeight: 0,
				capsuleTop: 0,
			};
		},
		created() {
			this.getCapsuleSite()
		},
		methods: {
			backIconHandler() {
				uni.navigateBack()
			},
			backIconHandlerRefresh() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 2]; // 上一页
				uni.navigateBack({
					success: function() {
						beforePage.onLoad()// 执行上一页的onLoad方法
					}
				})
			},
			backHomeHandler() {
				uni.switchTab({
					url: '/pages/tab_home/tab_home'
				})
			},
			//获取胶囊位置信息
			getCapsuleSite() {
				let res = uni.getMenuButtonBoundingClientRect()
				this.capsuleHeight = res.height
				this.capsuleTop = res.top
			}
		}
	}
</script>

<style lang="scss">
	.back {
		position: relative;
		padding: 0 0 0 20rpx;
		display: flex;
		align-items: center;
		z-index: 999;

		.back-text {
			margin:0 0 5rpx 20rpx;
			font-size: 40rpx;
			font-weight: bold;
			z-index: 999;
		}
	}
</style>