说明
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