uniapp自定义导航栏返回按键

html

<!-- #ifdef MP-WEIXIN || APP-PLUS -->
<view class="tc  header"
	:style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;padding-top:' + topBarTop() + 'px'">
	<view class="reg180" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
		<image @click="goback" src="/static/icon/back-jianatou.png" mode="" style="width: 48rpx;height: 48rpx;">
			</image>
		</view>
	</view>
<!-- #endif -->

js

goback() {
    
    
		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		console.log(routes.length);
		if (routes.length <= 1) {
    
    
			this.gotoPage('/pages/index/index');
			} else {
    
    
				uni.navigateBack();
			}
	},

css

.reg180 {
    
    
		padding-right: 20rpx;
		text-align: center;
		transform: rotateY(180deg);
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.header {
    
    
		z-index: 99;
		position: fixed;
		height: 30px;
		line-height: 30px;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: var(--status-bar-height);
	}
	

	.header .reg180 .icon-jiantou {
    
    
		color: #ffffff;
		background: rgba($color: #000000, $alpha: 0.6);
		display: block;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 50%;
	}

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！