微信小程序 Tab頁(yè)切換更新數(shù)據(jù)

微信小程序還處于內(nèi)測(cè)階段，最不方便的莫過(guò)于官方在不停的更新，前幾天寫(xiě)的功能隔個(gè)幾天忽然發(fā)現(xiàn)不能用了_(:зゝ∠)_

功能需求如下：

我在首頁(yè)點(diǎn)擊“5萬(wàn)以上”他會(huì)把跳轉(zhuǎn)到買(mǎi)車(chē)頁(yè)然后同時(shí)把“5萬(wàn)以上”這個(gè)篩選條件帶到買(mǎi)車(chē)頁(yè)。

之前navigator導(dǎo)航是可以跳轉(zhuǎn)并攜帶數(shù)據(jù)的，但這一次官方更新加了個(gè)新東西-----switchTab，專門(mén)用來(lái)實(shí)現(xiàn)tab頁(yè)的跳轉(zhuǎn)，但禁止攜帶數(shù)據(jù)

那么如果還想要實(shí)現(xiàn)我們的效果只能用別的方法了

想了一下有兩種思路

1、用數(shù)據(jù)緩存

2、用全局變量存儲(chǔ)globalData

最終我用的是全局變量，原因是我先嘗試數(shù)據(jù)緩存的時(shí)候用的onLoad，onLoad用于頁(yè)面加載，就是說(shuō)只有第一次打開(kāi)這個(gè)頁(yè)面他才會(huì)執(zhí)行，之后不會(huì)再執(zhí)行，也就第一次實(shí)現(xiàn)了效果之后都不會(huì)在做這個(gè)動(dòng)作。當(dāng)我嘗試局部變量的時(shí)候一開(kāi)始也用的onLoad當(dāng)然也沒(méi)實(shí)現(xiàn)然后我發(fā)現(xiàn)了onShow，onShow是每次顯示這個(gè)頁(yè)面的時(shí)候都執(zhí)行操作成功的完成了效果，我沒(méi)再試緩存但應(yīng)該也是可以實(shí)現(xiàn)的

具體的實(shí)現(xiàn)：

1、首先需要在app.js里定義需要的全局變量

globalData:{
  currentLocation:'北京',
  selectCondition:'',
  userInfo:null
 }

globalData里除了userInfo是小程序自帶的另兩個(gè)變量都是我定義的

2、在“首頁(yè)”里點(diǎn)擊“5萬(wàn)以上”之后做兩個(gè)操作

一是修改全局變量selectCondition的值

二是跳轉(zhuǎn)到買(mǎi)車(chē)頁(yè)

需要在首頁(yè)的.js里寫(xiě)：

var app=getApp();

然后在“5萬(wàn)以上”的點(diǎn)擊事件里修改全局變量selectCodition的值

addSelectCondition:function(e){
    var con=e.currentTarget.dataset.hi;
    app.globalData.selectCondition=con;
    console.log(app.globalData.selectCondition)
    wx.switchTab({
     url: '../buycar/pickcar'
    })
  }

這是整個(gè)function的內(nèi)容，console之前就是修改全局變量的值

之后就是跳轉(zhuǎn)到“買(mǎi)車(chē)”tab頁(yè)的代碼，用了wx.switchTab

3、在買(mǎi)車(chē)頁(yè)的onShow函數(shù)里得到全局變量selectCondition并且賦值給我們data里早就定義好的變量，這樣就可以在“買(mǎi)車(chē)”里調(diào)用這個(gè)“5萬(wàn)以上”的值了

成功，撒花

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

最新評(píng)論