uniapp中使用 uni.navigateBack() 返回上级页面并传参的方法

作者:百宝袋

时间:2026-10-31

浏览:92

本文介绍在uniapp中如何利用 uni.navigateBack() 返回上级页面并传递数据。核心步骤包括通过 getCurrentPages() 获取页面栈,定位上一页面实例,调用其绑定的方法并传入参数,最后执行返回操作。

文章目录

uniapp navigateBack 返回上一页传参教程

在uniapp中利用 uni.navigateBack() 实现返回上级页面并传递参数

场景:从A页面跳转至B页面,B页面处理完毕后需将数据回传至A页面

实现方案:

  • 在B页面的相关事件处理逻辑中执行以下步骤:

1. 调用 getCurrentPages() 获取页面栈,参考官方文档说明

该方法返回按入栈顺序排列的页面实例数组,首项为首页,末项为当前页

2. 提取上一个页面的实例对象

3. 在上一个页面实例上调用并传递参数给指定方法

4. 执行返回上一级页面的操作

代码示例:

 // 返回A页
 goPageA(idx){
     // 1. 获取当前页面栈实例(此时最后一个元素为当前页)
     let pages = getCurrentPages() 
     // 2. 上一页面实例
     	// 注意是length长度,所以要想得到上一页面的实例需要 -2
     	// 若要返回上上页面的实例就 -3,以此类推
     let prevPage = pages[pages.length -2] 
     // 3. 给上一页面实例绑定getValue()方法和参数(注意是$vm)
     prevPage.$vm.getValue(this.list) 
     // 4. 返回上一页面
     uni.navigateBack({
         delta: 1 // 返回的页面数
     })
 }

在A页面中定义并调用上述绑定的 getValue() 方法以接收B页面回传的数据

getValue(list){
    console.log(list,'B页面传递的数据')
}

关于uniapp中 uni.navigateBack() 返回并传参的教程至此结束,更多相关内容请参阅本站历史文章或继续浏览后续章节,感谢支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章