您好,小程序模板欢迎您。
小程序模板
当前位置 : 首页> 小程序教程> 小程序回退上一页面传递参数问题解决方法(uniapp的uni.navigateBack篇)

小程序回退上一页面传递参数问题解决方法(uniapp的uni.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天,签到3天将获得积分VIP1天

知道了