小程序 使用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)
    }
  }
})
 

posted on   大西瓜3721  阅读(1269)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 无需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 的基本操作

导航

点击右上角即可分享
微信分享提示