uni-app 返回（后退）上一页并刷新（左上角返回按钮、侧滑后退）-马育民老师

# 说明

A页面调用 `uni.navigateTo` 显示 B页面
B页面调用 `uni.navigateBack` 后退到A页面，并让A页面重写加载数据

### 应用场景

- 后退刷新上一页面
- 后退时提示：内容改变，但没有保存

### 原理

在 B 页面，使用 `onBackPress(event)` 生命周期函数，拦截后退事件，然后通过 `navigateBack()` 成功回调函数中，**发射自定义事件**

在 A 页面，`navigateTo` 中增加监听该自定义事件，监听到该事件，就刷新数据

# onBackPress

函数声明：

```
onBackPress(event)
```

##### event的值：

event ={from: backbutton | navigateBack}

### 触发机制

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

- 顶部导航栏左边的返回按钮 (from = backbutton)
- 返回 API，即 uni.navigateBack() (from = navigateBack)
- Android侧滑后退
- Android 实体返回键 (from = backbutton)

### 不会触发

- IOS 左滑后退不可用

### 注意事项：

- 函数中返回值为 `true` 时， 表示 **不执行默认的返回**，执行自定义的的业务逻辑。
- 不返回或返回其它值，均会执行默认的返回行为。
- H5 平台，顶部导航栏返回按钮支持 onBackPress()，浏览器默认返回按键及Android手机实体返回键不支持 `onBackPress()`
- 暂不支持直接在自定义组件中配置该函数，目前只能是在页面中来处理。

# 实现

### A页面

```
uni.navigateTo({
	url: 'note/list?tid='+tid,
	events: {
		// 监听 navReloadEvent自定义 事件
		navReloadEvent:(data) => {
			// 调用下拉刷新，延时执行更稳定，否则可能不触发
			setTimeout( () => {
				uni.startPullDownRefresh()
			},100)
		}
	}
});
```

### B页面

```
onBackPress(options) {  
	if (options.from === 'navigateBack') {  
		return false;  
	}  
	this.back();  
	return true;  
},
methods: {
	back() { 
		uni.navigateBack({
			delta: 1,
			success: () => {
				const eventChannel = this.getOpenerEventChannel();
				// 发射 navReloadEvent 自定义时间，可传递数据
				eventChannel.emit('navReloadEvent',1);
			}
		});
	}  
},
```

参考：
https://blog.csdn.net/weixin_44433499/article/details/107336278
https://blog.csdn.net/weixin_46001736/article/details/131888456
https://juejin.cn/post/7097056545305722910
https://blog.csdn.net/mwh_user/article/details/108458736

原文出处：https://malaoshi.top/show_1IX77D8o6cUu.html