小程序 使用navigateBack返回携带参数
在写业务的时候,我们有时候会遇到这样的场景:从a页面跳转到b页面,然后需要再从b页面返回到a页面;并携带一些数据回来。
这个时候通常我们会使用到
1 | wx.navigateBack |
但是由于navigateBack无法直接携带参数;传参就需要另想办法了
当然实现的方法有很多;这里要说的是通过setData的方式实现
b页面代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 选定当前店铺 changeShopfn: function (e) { console.log(e) let shopinfo = e.currentTarget.dataset.item; console.log(shopinfo) let pages = getCurrentPages(); //获取页面栈 let prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setData()方法,把数据存到上一个页面中去 prevPage.setData({ mydata:shopinfo }) wx.navigateBack({ delta: 1, }) }, |
a页面代码
onShow: function () { let pages = getCurrentPages(); let currPage = pages[pages.length - 1]; //当前页面 console.log(currPage.data.mydata) let shopList=currPage.data.mydata; if(shopList){ this.setData({ shopList }) } },复制
通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。 如下所示:
方法一
testBack(){
const pages = getCurrentPages();
const currPage = pages[pages.length - 1];//当前页面
const prePage = pages[pages.length - 2];//上一个页面
/**
* 直接调用上一个页面的setData()方法,把数据存到上一个页面中去
* 不需要页面更新
*/
prePage.setData({
title: '新的标题'
})
wx.navigateBack({
delta: 1
})
}
方法二(直接调用方法名来更新数据)
页面A
Page({
data: {
name: ''
},
...
,
//更新name
changeData: function(name){
this.setData({
name: name
})
}
})
页面B,假设有一个文本框用于输入姓名,点击返回按钮后更新页面A的name
Page({
//此方法用于文本框输入回调
inputTyping: function (e) {
//获取页面栈
var pages = getCurrentPages();
if(pages.length > 1){
//上一个页面实例对象
var prePage = pages[pages.length - 2];
//关键在这里
prePage.changeData(e.detail.value)
}
}
})
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
2018-04-04 MVC2 扩展Models和自定义验证(学习笔记)
2016-04-04 Jquery元素追加和删除
2016-04-04 Jquery Table 的基本操作