activitys-uniapp/components/back.vue

<template>
	<view class="page">
		<view class="flex-sub">
			<view class="back " @click="back()">
				<text class="cuIcon-back" style="color: #FFFFFF;"></text>
			</view>
		</view>

		<view class="title flex-sub" v-if="title">
			<text :style="titleStyle">{{title}}</text>
		</view>
		<view class="flex-sub">

		</view>
	</view>
</template>

<script>
	export default {
		name: "back",
		props: {
			title: {
				type: String,
				default: ''
			},
			titleStyle: {
				type: String,
				default: 'color: #fff;font-size: 32rpx;'
			},
			customBack: {
				type: Function,
				default: null
			}
		},
		data() {
			return {

			};
		},
		methods: {
			back() {
				// 如果自定义了点击返回按钮的函数，则执行，否则执行返回逻辑
				if (typeof this.customBack === 'function') {
					this.customBack.bind(this.$u.$parent.call(this))();
				} else {
					uni.navigateBack();
				}
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.flex-sub {
		flex: 1;
	}

	.title {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.page {
		position: fixed;
		width: 100%;
		top: var(--status-bar-height);
		margin-top: var(--status-bar-height);
		z-index: 9999999999;
		transition: top .25s;
		display: flex;
		width: 100%;
	}

	.back {
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, .2);
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>