微信小程序返回上一頁(yè)傳參并刷新過(guò)程解析
這篇文章主要介紹了微信小程序返回上一頁(yè)傳參并刷新過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
問(wèn)題
微信小程序onLoad(options)方法在整個(gè)生命周期中只加載一次,也就是你進(jìn)入下個(gè)頁(yè)面,再返回時(shí),是不會(huì)再次觸發(fā)的,所以你返回是url傳參是行不通了。
需求
現(xiàn)在有這么一個(gè)需求:一個(gè)商品支付頁(yè)面,點(diǎn)擊優(yōu)惠卷進(jìn)入優(yōu)惠券列表頁(yè),選中優(yōu)惠券后帶著數(shù)據(jù)再返回到支付頁(yè)面。
方法
一、使用到的方法是小程序的頁(yè)面棧,感興趣可以打印一下pages的內(nèi)容,就是你頁(yè)面跳轉(zhuǎn)的軌跡數(shù)組,最后一項(xiàng)就是當(dāng)前頁(yè)面,倒數(shù)第二個(gè)就是上一頁(yè)。很好理解,因?yàn)樵诋?dāng)前頁(yè)停止了,肯定是最后一個(gè)
//獲取頁(yè)面棧 let pages = getCurrentPages(); //獲取所需頁(yè)面 let currPage = pages[pages.length - 1];//當(dāng)前頁(yè)面 let prevPage = pages[pages.length -2];//上一頁(yè)
二、在支付頁(yè)把需要再次刷新的數(shù)據(jù)都放到onShow()方法中,不需要刷新的放到onLoad()方法中
思路
1、我們的目標(biāo)是把優(yōu)惠券的數(shù)據(jù)渲染到支付頁(yè)上,所以先在優(yōu)惠券頁(yè)面點(diǎn)擊優(yōu)惠券的時(shí)候通過(guò)頁(yè)面棧獲取到上一頁(yè)(也就是支付頁(yè)),將本條數(shù)據(jù)動(dòng)態(tài)添加到支付頁(yè)的data中
//獲取頁(yè)面棧 let pages = getCurrentPages(); //獲取所需頁(yè)面 let prevPage = pages[pages.length -2];//上一頁(yè) prevPage.setData({ yourData:yourData,//你需要傳過(guò)去的數(shù)據(jù) });
2、將需要刷新的數(shù)據(jù)放到onShow()方法中
//這里展示在onShow方法中獲取當(dāng)前頁(yè)onLoad方法中的options onShow:function(){ let pages = getCurrentPages(); let currPage = pages[pages.length - 1]; //當(dāng)前頁(yè)的options,啥意思呢,就是你可能某個(gè)函數(shù)需要刷新,但是他的參數(shù)正好是傳過(guò)來(lái)的參數(shù) console.log(currPage.options); }
你在優(yōu)惠券頁(yè)點(diǎn)擊之后,因?yàn)槟愕臄?shù)據(jù)已經(jīng)存到支付頁(yè)了,所以返回支付頁(yè)后,你可以直接在data中獲取到你需要的數(shù)據(jù),進(jìn)行你需要的操作。
Ok,這就完事了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果
這篇文章主要介紹了微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11electron中獲取mac地址的實(shí)現(xiàn)示例
在基于Electron的應(yīng)用中,有一個(gè)業(yè)務(wù)需求是獲取物理網(wǎng)卡的Mac地址以用于客戶機(jī)唯一性識(shí)別,本文主要介紹了electron中獲取mac地址的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12JavaScript引用類型Date常見(jiàn)用法實(shí)例分析
這篇文章主要介紹了JavaScript引用類型Date常見(jiàn)用法,結(jié)合實(shí)例形式分析了引用類型Date基本創(chuàng)建、參數(shù)使用及相關(guān)注意事項(xiàng),需要的朋友可以參考下2018-08-08JavaScript實(shí)現(xiàn)的可變動(dòng)態(tài)數(shù)字鍵盤控件方式實(shí)例代碼
本篇文章主要介紹了JavaScript實(shí)現(xiàn)的可變動(dòng)態(tài)數(shù)字鍵盤控件方式實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了了解一下2017-07-07