MiniPrograms/components/back/back.vue

<template>
	<view class="back" :style="{height: capsuleHeight+ 'px',top:capsuleHighly+'px'}">
		<u-icon name="arrow-left" :color="color" size="24" @click="backIconHandler"></u-icon>
		<view class="back-text" :style="{color: color}">
			{{ text }}
		</view>
	</view>
</template>

<script>
	export default {
		name: "back",
		props:{
			text:{
				type:String,
				default:''
			},
			color:{
				type:String,
				default:'#3B4144'
			}
		},
		data() {
			return {
				//胶囊高度
				capsuleHeight: 0,
				//
				capsuleHighly: 0,
			};
		},
		created() {
			this.getCapsuleSite()
		},
		methods:{
			backIconHandler(){
				uni.navigateBack()
			},
			//获取胶囊位置信息
			getCapsuleSite(){
				let res=uni.getMenuButtonBoundingClientRect()
				this.capsuleHeight = res.height
				this.capsuleHighly = res.top 
			}
		}
	}
</script>

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

		.t-icon {
			width: 35rpx;
			height: 35rpx;
		}
		
		.back-text{
			font-size: 40rpx;
			margin:0 0 6rpx 20rpx;
		}
	}
</style>