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

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

功能需求如下：

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

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

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

想了一下有兩種思路

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

2、用全局變量存儲globalData

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

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

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

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

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

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

一是修改全局變量selectCondition的值

二是跳轉(zhuǎn)到買車頁

需要在首頁的.js里寫：

var app=getApp();

然后在“5萬以上”的點(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)到“買車”tab頁的代碼，用了wx.switchTab

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

成功，撒花

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

最新評論