uniapp uni.navigateBack 连带返回问题记录

uniapp uni.navigateBack 连带返回问题记录

问题描述

去除原生导航栏，使用自定义导航，并使用自定义返回按钮，通过方法handleBack.navigateBack()返回到上一页。

共有3层页面，A -> B -> C。都是自定义导航栏。均使用navigateTo进行跳转，通过点击事件，直接调用navigateBack（）返回上一层。

预期结果：C页面调用返回B页面，C -> B。

实际效果：但是偏偏直接返回A页面，C -> A。

代码

<cu-custom class="fade-in" :isBack="true"   style="z-index: 999;" >
	<block slot="backText">
		<span  style="margin-left: 10rpx;font-size: 40rpx;" class="cuIcon-back text-black" @click="handleBack"></span>
	</block>
	<block slot="content">
		<span class="text-black">详情</span>
	</block>
		  		  
</cu-custom>

<!-- js -->

handleBack(){ //处理返回
	uni.navigateBack()
},

处理

百度说指定delta层数返回，但是没有用

突然发现PC端运行小程序，页面会比较卡顿，发现确实是 C -> B ,但是接下来又自动触发 B -> A。才会导致直接从 C -> A的结果

到这里，就已经开始怀疑是事件冒泡弄的结果了。

事件冒泡

所谓的冒泡就是事件的逐级向上传导的过程，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

@click.stop

采用@click.stop 来处理事件，果然不会直接返回到A页面

<cu-custom class="fade-in" :isBack="true"   style="z-index: 999;" >
	<block slot="backText">
		<span  style="margin-left: 10rpx;font-size: 40rpx;" class="cuIcon-back text-black" @click.stop="handleBack"></span>
	</block>
	<block slot="content">
		<span class="text-black">详情</span>
	</block>		  		  
</cu-custom>