uni-app怎么实现返回上一页并携带参数

前端开发中关于页面后退是最常见的操作,本篇文章就来介绍在uni-app开发中,我们可以如何使用返回功能及参数的传递需求。

问题描述:从页面一跳转到页面二,在页面二后退到页面一后将页面二的参数传递给页面一。

    页面一,本页面接受后退后接收的参数信息。

    页面二,该页面中设置页面后退操作并携带返回后传递的参数。

了解了功能需求,那么接下来就看看在代码中要如何实现该功能呢?

页面一在onShow生命周期中使用uni.$on监听returnData并获取返回的参数信息。

onShow() {
uni.$on('returnData', function(data) {
console.log("监听到事件来自返回的参数:", data);
})
}

页面二中定义后退方法,并携带参数。

<script>
export default {
methods: {
goBack() {
uni.$emit('returnData', {
'data':'返回测试参数'
})
uni.navigateBack({
delta: 1
})
}
}
}
</script>

需要注意uni.$emit中设置的方法名returnData需要和页面一uni.$on中接收的参数名一致。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!