小程序回退上一页面传递参数问题解决方法(uniapp的uni.navigateBack篇)
开发小程序会用到uni.navigateBack或者wx.navigateBack回退到上一页面,但是这个路由方法怎么实现传值呢?这里讲到实现的方法,大家感兴趣的可以看看。
·
这一篇文章讲述的是小程序基础,小白可以看过来。在开发小程序会用到uni.navigateBack或者wx.navigateBack回退到上一页面,但是这个路由方法怎么实现传值呢?这里讲到实现的方法,大家感兴趣的可以看看。
功能介绍:
这是我在公司写小程序做到的一个功能,比如在A页面有一个卡片让我们跳转到B页面去选择数据再回退A页面可以看到自己所选择的数据,这不是什么难点,只能记录实现功能代码。
实现方法:
思路:在回退页面的回调方法调用getCurrentPages函数,然后通过获取页面栈的方法去变更上一页面的数据。这个getCurrentPages函数实现的方法有两种,一种是直接去改变原来页面(A页面)的参数,另一种就是通过调用原来页面(A页面)的方法再去改变页面参数。
回退页(B页面)方法代码:
const pages = getCurrentPages() // 获取所有页面栈实例列表
const prevPage = pages[pages.length - 2] // 上一页面的数据
console.log("获取所有页面栈实例列表:", pages)
console.log("这是上一页面的数据:", prevPage)
// 直接改变上一页面的数值
prevPage.$vm.title = e.title // e是需要传递的数据
// 通过调用上一页的方法实现
prevPage.$vm.getNavigateBack(e) // e是需要传递的数据
// 返回上一页
uni.navigateBack({
delta: 2
});
原来页面(A页面)的方法:
// 上一页面调用此方法
getNavigateBack(e) {
// 对得到的数据处理
console.log("这是回退页传递的数据--", e)
}
这是一个实现的方法,要是有其他的实现方法大家可以一起讨论。
更多推荐
已为社区贡献1条内容
所有评论(0)