小程序模板網(wǎng)

微信小程序返回上一頁傳參并刷新

發(fā)布時(shí)間:2021-07-05 08:47 所屬欄目:小程序開發(fā)教程

問題

  微信小程序onLoad(options)方法在整個(gè)生命周期中只加載一次,也就是你進(jìn)入下個(gè)頁面,再返回時(shí),是不會(huì)再次觸發(fā)的,所以你返回是url傳參是行不通了。

需求

  現(xiàn)在有這么一個(gè)需求:一個(gè)商品支付頁面,點(diǎn)擊優(yōu)惠卷進(jìn)入優(yōu)惠券列表頁,選中優(yōu)惠券后帶著數(shù)據(jù)再返回到支付頁面。

方法

  一、使用到的方法是小程序的頁面棧,感興趣可以打印一下pages的內(nèi)容,就是你頁面跳轉(zhuǎn)的軌跡數(shù)組,最后一項(xiàng)就是當(dāng)前頁面,倒數(shù)第二個(gè)就是上一頁。很好理解,因?yàn)樵诋?dāng)前頁停止了,肯定是最后一個(gè)

  //獲取頁面棧

  let pages = getCurrentPages();

  //獲取所需頁面

  let currPage = pages[pages.length - 1];//當(dāng)前頁面

  let prevPage = pages[pages.length -2];//上一頁

  二、在支付頁把需要再次刷新的數(shù)據(jù)都放到onShow()方法中,不需要刷新的放到onLoad()方法中

思路

  1、我們的目標(biāo)是把優(yōu)惠券的數(shù)據(jù)渲染到支付頁上,所以先在優(yōu)惠券頁面點(diǎn)擊優(yōu)惠券的時(shí)候通過頁面棧獲取到上一頁(也就是支付頁),將本條數(shù)據(jù)動(dòng)態(tài)添加到支付頁的data中

  //獲取頁面棧

  let pages = getCurrentPages();

  //獲取所需頁面

  let prevPage = pages[pages.length -2];//上一頁

  prevPage.setData({

  yourData:yourData,//你需要傳過去的數(shù)據(jù)

  });

  2、將需要刷新的數(shù)據(jù)放到onShow()方法中

  //這里展示在onShow方法中獲取當(dāng)前頁onLoad方法中的options

  onShow:function(){

  let pages = getCurrentPages();

  let currPage = pages[pages.length - 1];

  //當(dāng)前頁的options,啥意思呢,就是你可能某個(gè)函數(shù)需要刷新,但是他的參數(shù)正好是傳過來的參數(shù)

  console.log(currPage.options);

  }

  你在優(yōu)惠券頁點(diǎn)擊之后,因?yàn)槟愕臄?shù)據(jù)已經(jīng)存到支付頁了,所以返回支付頁后,你可以直接在data中獲取到你需要的數(shù)據(jù),進(jìn)行你需要的操作。

 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26987.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢