DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2018-10-23 17:17
  • 更新:2024-03-28 18:51
  • 阅读:255822

uni-app自定义返回逻辑教程

分类:uni-app

自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。

onBackPress(event) 返回 event ={from: backbutton | navigateBack}

说明

当用户进行以下操作时,会触发该函数:

  • Android 实体返回键 (from = backbutton)
  • 顶部导航栏左边的返回按钮 (from = backbutton)
  • 返回 API,即 uni.navigateBack() (from = navigateBack)

注意事项:

  • 只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。
  • 当不阻止页面返回却直接调用页面路由相关接口(如:uni.switchTab)时,可能会导致页面显示异常,可以通过延迟调用路由相关接口解决。
  • 不返回或返回其它值,均会执行默认的返回行为。
  • H5 平台,顶部导航栏返回按钮支持 onBackPress(),浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
  • 暂不支持直接在自定义组件中配置该函数,目前只能是在页面中来处理。

场景示例

页面返回

场景说明:

页面中的遮罩处于显示状态时,点击返回不希望直接关闭页面,而是隐藏掉遮罩。遮罩隐藏后,继续点击返回再执行默认的逻辑。

自定义遮罩

通常自定义的遮罩/弹出层,都会做成组件,这样方便复用。

新建 uni-app 项目->components->mask.vue 文件,代码如下:

<template>  
	<view>  
		<view class="cpt-mask">  
		</view>  
	</view>  
</template>  
  
<script>  
	export default {}  
</script>  
  
<style>  
	.cpt-mask {  
		position: fixed;  
		top: 0;  
		left: 0;  
		width: 100%;  
		height: 100%;  
		background-color: #000000;  
		opacity: 0.5;  
		z-index: 99;  
	}  
</style>

引用遮罩组件

在页面中引入 mask 自定义组件后,通过一个状态值来控制其隐藏/显示。

<mask v-if="showMask"></mask>

这里用 v-if,不要用 v-show,自定义组件存在一些问题待优化。

处理返回逻辑

在 onBackPress 中,判定当前遮罩是否处于显示状态。如果显示,则关闭遮罩并返回 true。

onBackPress() {  
  if(this.showMask) {  
    this.showMask = false;  
    return true;  
  }  
},

多级返回

部分业务场景下,返回的逻辑中需要返回多级页面。

由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。
此时,需要根据 onBackPress 的回调对象中的 from 值来做处理,当来源是 'navigateBack' 时,返回 false。

<template>  
	<view>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {};  
		},  
		onBackPress(options) {  
			if (options.from === 'navigateBack') {  
				return false;  
			}  
			this.back();  
			return true;  
		},  
		methods: {  
			back() {  
				uni.navigateBack({  
					delta: 2  
				});  
			}  
		},  
	}  
</script>  
  
<style>  
  
</style>

应用退出

场景说明:

若在App首页,点击手机物理返回键,此时无返回页面可关闭,uni-app默认会提示“再按一次退出应用”;若想自定义退出信息,如修改为:出现一个拟态窗口提示我们是否退出应用,点击确定退出应用。点击取消,不做操作。

实现方案:

在 onBackPress 中,遮罩不显示的状态下,点击返回键将弹出拟态窗。

onBackPress() {  
   if(this.showMask) {  
     this.showMask = false;  
     return true;  
   }else{  
	  uni.showModal({  
		title: '提示',  
		content: '是否退出uni-app?',  
		success: function(res) {  
			if (res.confirm) {  
				// 退出当前应用,改方法只在App中生效  
				plus.runtime.quit();  
			} else if (res.cancel) {  
				console.log('用户点击取消');  
			}  
		}  
	  });  
	  return true  
   }  
},

实现效果如下图:

运行体验

完整的示例代码,见附件。解压后,拖至 HBuilderX 运行即可。

37 关注 分享
Trust 8***@qq.com dmj 1***@qq.com 2***@qq.com 3***@qq.com a***@astcn.net 达达x zting590 a***@qq.com 1***@qq.com w***@qq.com 恰似你的温柔丶 最光阴 mfan updream Jasmine001 1***@qq.com c***@sodo-tech.com zr12041019 rysnone uniuk 心乐 Yugi 4***@qq.com 1***@qq.com l***@163.com 陈子文 l***@foxmail.com 小康爱编程 土豆鸡丁_o0 4***@qq.com l***@163.com 鸡排饭加个蛋 l***@qq.com DCloud_UNI_HRK z***@163.com

要回复文章请先登录注册

3***@qq.com

3***@qq.com

当我在onBackPress中使用uni.showModal时,我如何等待用户点击确认在让他执行默认行为,目前这个代码是不生效的
onBackPress(event) {
uni.showModal({
title: "提示",
content: '是否需要退出当前一键导入界面?退出后,从新进入,需从头开始建模。',
maskClick: false,
showCancel: true,
confirm () {
console.log('ssssss')
return false;
}
})
return true;
},
2023-08-29 10:00
4***@qq.com

4***@qq.com

能全局弹出退出App弹框吗
2023-07-24 12:22
7***@qq.com

7***@qq.com

web-view 组件中,一旦点击链接的内容,就无法返回,是什么原因呢?
2023-07-20 11:09
不是发哥

不是发哥

回复 j***@qq.com :
true才会拦截
2023-07-06 15:37
1***@qq.com

1***@qq.com

页面刷新进入不触发,这就是一个bug啊
2023-07-06 14:54
j***@163.com

j***@163.com

回复 j***@qq.com :
onBackPress(options => {
if (options.from == 'backbutton') {
uni.navigateBack({ delta: 100 });
return true;
}
return false;
}

不监听navigateBack,监听backbutton就可以了
2023-06-20 17:42
j***@qq.com

j***@qq.com

onBackPress(e) {
console.log('你妈的');
console.log(e);
return false;
},
测试APP 和 H5 页面返回时进入到了onBackPress方法,也打印出了方法的日志,但是 return false; 并没有阻止页面返回上一页
2023-06-16 16:22
1***@qq.com

1***@qq.com

App 离线打包 onBackPress return true 无法阻止默认行为
2023-05-24 11:27
y***@icloud.com

y***@icloud.com

回复 从零薛 :
你有仔细看吗 ? 是在H5平台的情况下,安卓实体返回键不会触发
2023-04-19 13:41
1***@qq.com

1***@qq.com

回复 1***@qq.com :
怎么实现呢?
2023-04-19 09:18