微信小程序 Tab頁切換更新數(shù)據(jù)
微信小程序 Tab頁切換更新數(shù)據(jù)
微信小程序還處于內(nèi)測階段,最不方便的莫過于官方在不停的更新,前幾天寫的功能隔個(gè)幾天忽然發(fā)現(xiàn)不能用了_(:зゝ∠)_
功能需求如下:
我在首頁點(diǎn)擊“5萬以上”他會(huì)把跳轉(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、用全局變量存儲(chǔ)globalData
最終我用的是全局變量,原因是我先嘗試數(shù)據(jù)緩存的時(shí)候用的onLoad,onLoad用于頁面加載,就是說只有第一次打開這個(gè)頁面他才會(huì)執(zhí)行,之后不會(huì)再執(zhí)行,也就第一次實(shí)現(xiàn)了效果之后都不會(huì)在做這個(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萬以上”的值了
成功,撒花
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JavaScript?CSS優(yōu)雅實(shí)現(xiàn)網(wǎng)頁多主題風(fēng)格換膚功能詳解
這篇文章主要為大家介紹了JavaScript?CSS優(yōu)雅的實(shí)現(xiàn)網(wǎng)頁多主題風(fēng)格換膚功能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例
這篇文章主要為大家介紹了輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
微信小程序中頁面FOR循環(huán)和嵌套循環(huán)
這篇文章主要介紹了微信小程序中頁面FOR循環(huán)和嵌套循環(huán)的相關(guān)資料,需要的朋友可以參考下2017-06-06
微信小程序 Windows2008 R2服務(wù)器配置TLS1.2方法
微信小程序免費(fèi)SSL證書https、TLS版本問題的解決方案《二十四》request:fail錯(cuò)誤(含https解決方案)(真機(jī)預(yù)覽問題把下面的代碼復(fù)制到PowerShell里運(yùn)行一下,然后重啟服務(wù)器。# Enables TLS 1.2 on ...,需要的朋友可以參考下2016-12-12
Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解
這篇文章主要為大家介紹了Canvas如何判斷點(diǎn)在形狀內(nèi)及內(nèi)置API性能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
jQuery單頁面文字搜索插件jquery.fullsearch.js的使用方法
jquery.fullsearch.js是一款基于Bootstrap文字搜索插件,可以幫助您快速搜索到當(dāng)前頁面所包含的指定文字,并定位到所在位置2020-02-02




