uniapp中,监听页面物理返回问题

业务场景:监听到手机物理返回后,返回到我想要返回的页面(返回按钮自动是返回上一页的)

uniapp官方提供了onBackPress的用法, 这个钩子目前官方只支持app、H5、支付宝小程序,针对我使用的场景(微信小程序)中是不支持这个钩子的,在研究浏览了大量文档后,终于解决了,记录一下我的踩坑和解决方案。

解决方案:利用微信官方提供的视图容器组件 page-container | 微信开放文档

页面容器 page-container官网介绍:

小程序如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。 为此提供“假页”容器组件,效果类似于 popup 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口

见用法:点击返回会触发 beforeleave 事件

<view v-if="isShow">
	<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave">
    </page-container>
</view>

data(){return{isShow: true}}

beforeleave() {
	this.isShow = false; //这个很重要,一定要先把弹框删除掉
	uni.switchTab({
		url: "/pages/user/index"
	});
   //uni.showModal({
		// 	confirmColor: '#bd3124',
		// 	title: "确认离开我的账户页面?",
		// 	success: (e) => {
		// 		if (e.confirm) {
		// 			console.log('确认盘点接口');
		// 			// 返回上一页
		// 			uni.switchTab({
		// 				url: "/pages/user/index"
		// 			});
		// 		}else{
		// 			return false;
		// 		}
		// 	}
	//})
},

踩坑一:

监听页面返回换个思路就是页面离开了,所以第一次是站在页面离开的思路解决问题,开始使用了页面离开或者销毁的钩子 实现业务:onUnload

页面返回就是离开,会触发onUnload钩子,在函数中监测到页面的变化,返回自己想要的页面或者做其他操作

onUnload() {
	uni.switchTab({
	 	url: "/pages/user/index"
 	});
},

效果实现了,但是出现了预料中的问题(中间页面闪现),因为返回按钮默认是navigateback返回上一页,因此页面离开前会触发先返回上一页在返回自己想要的页面,就造成了中间页面跳转闪动,在找不到更好的解决方案时此方案作为备选。

踩坑二:

看有人说在a页面跳转b页面时,a页面在跳转成功后调用uni.navigateBack({delta:0}),b在返回时就可以阻止b页面到a页面的返回,只想说,这个死循环逻辑饶的玩笑了。

uni.navigateTo({
	url: "/pagesA/account/index?sign=corpore",
    success(){
        uni.navigateBack({delta:0})
    }
})

// 监听页面路由变化的方法会执行很多次,轻易不要用,不好用这里简单做个记录
// uni.onAppRoute(res => {
// 	console.log(res,'rsd')
//     if (res.openType === 'navigateBack') {
// 		console.log('我进来了')
//       //执行相应的操作,例如关闭弹窗或禁止返回
//     }
//  });

  • 9
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值