首页 > 编程语言 >小程序 使用navigateBack返回携带参数

小程序 使用navigateBack返回携带参数

时间:2023-04-04 21:00:35浏览次数:40  
标签:name navigateBack 携带 参数 let 页面 pages setData

在写业务的时候,我们有时候会遇到这样的场景:从a页面跳转到b页面,然后需要再从b页面返回到a页面;并携带一些数据回来。

这个时候通常我们会使用到  

wx.navigateBack

但是由于navigateBack无法直接携带参数;传参就需要另想办法了

当然实现的方法有很多;这里要说的是通过setData的方式实现

b页面代码

 // 选定当前店铺
  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)
    }
  }
})
 

标签:name,navigateBack,携带,参数,let,页面,pages,setData
From: https://www.cnblogs.com/Alex80/p/17287871.html

相关文章

  • docker run 参数详解
    命令格式:dockerrun[OPTIONS]IMAGE[COMMAND][ARG...]Usage:Runacommandinanewcontainer中文意思为:通过run命令创建一个新的容器(container)常用选项说明-d,--detach=false,指定容器运行于前台还是后台,默认为false-i,--interactive=false,打开STDIN,用于控制台交互-t,-......
  • swift tabview 带参数请求网络。多条目展示。json解析,逃逸闭包
    效果:用到的第三方#Uncommentthenextlinetodefineaglobalplatformforyourprojectplatform:ios,'9.0'target'News'do#Commentthenextlineifyoudon'twanttousedynamicframeworksuse_frameworks!#PodsforNewsp......
  • http信息头管理器-动态参数化
     5000个用户,需要用5000个不同的id  解决办法菜单栏--函数助手--random分别填写最小值,最大值点击“生成”,则默认复制直接去变量值的位置粘贴即可  - ......
  • java xxljob 根据参数运行业务
    配置定时任务不启动,手动执行根据传入的参数完成既定的业务 /** *自定义增删除平台酒体数据 *参数:startDate,endDate[yyyy-MM-dd) * *@return{@link*@return:com.xxl.job.core.biz.model.ReturnT<java.lang.String>} *@author:xxx *@date2023/3/12 **......
  • UI跳转WE DYNPRO带参数
    同事今天在做一个需求,需要把UI上的业务角色,传递给挂在UI上的DYNPRO程序。然后我们就研究了一下,发现挺好玩的。1,设置URL参数2.定义URL的参数3.找到链接对应的类,把参数传上4.WEBDYNPRO里把参数设置到application上5.然后在默认的windows里加入入参,获取参数 ......
  • python基础六(函数基础及参数使用)
    一、函数定义1、什么是函数函数就相当于具备某一功能的工具函数的使用必须遵循一个原则:先定义后调用2、为何要用函数代码冗余,程序的组织结构不清晰,可读性差可维护性、扩展性差3、如何用函数#定义函数#定义的语法def函数名(参数1,参数2,........
  • 读取和修改GPIO配置参数的ADB命令
    1、读取每个GPIO的参数adbshellcat/sys/devices/virtual/misc/mtgpio/pin打印出来的参数从左到右分别是Pin:modepullseldindoutpullendirdinv(inversion) 2、修改GPIO的参数adbshellecho-w=[pin]:[mode][pullsel][din][dout][pull......
  • 关于 Angular 应用部署时的 base-href 参数
    import{existsSync}from'fs';server.get(['/shop/*','/shop'],(req,res)=>{res.render(indexHtml,{req,providers:[{provide:APP_BASE_HREF,useValue:req.baseUrl}],});});server.set('views',distFo......
  • megento 获取url参数
    ifwehavethefollowingrequirement:http://host/index.php/?resid=anyvalue    http://host/index.php/storeviewname/?resid=anyvalue,or......?resid=anyvalue //getallParameters.$this->getRequest()->getParams()//getanyspecifically$this->ge......
  • chrony之maxslewrate参数测试
    3Apr21:47:59ntpdate[1604]:steptimeserver192.168.12.21offset-20.062975sec[root@localhost~]#ntpdate-d-u192.168.12.213Apr21:48:42ntpdate[1605]:[email protected]:38:19UTC2020(1)Lookingforhost192.168.12.21and......