uniapp?switchtab傳參并接收參數(shù)三種方法
方法一:使用全局變量(推薦)
在跳轉(zhuǎn)前存儲數(shù)據(jù):
// 在需要跳轉(zhuǎn)的頁面 const app = getApp(); app.globalData.tabParams = { key: 'value' // 自定義參數(shù) }; uni.switchTab({ url: '/pages/targetTab/targetTab' });
在目標(biāo)頁面獲取數(shù)據(jù):
// 目標(biāo) tab 頁面的 onShow 生命周期中 onShow() { const app = getApp(); const params = app.globalData.tabParams; if (params) { console.log('接收參數(shù):', params); // 使用后清除參數(shù)(避免重復(fù)獲?。? delete app.globalData.tabParams; } }
方法二:使用本地存儲(如 uni.setStorageSync)
在跳轉(zhuǎn)前存儲數(shù)據(jù):
// 在需要跳轉(zhuǎn)的頁面 uni.setStorageSync('tabParams', { key: 'value' // 自定義參數(shù) }); uni.switchTab({ url: '/pages/targetTab/targetTab' });
在目標(biāo)頁面獲取數(shù)據(jù):
// 目標(biāo) tab 頁面的 onShow 生命周期中 onShow() { const params = uni.getStorageSync('tabParams'); if (params) { console.log('接收參數(shù):', params); // 使用后清除存儲(避免重復(fù)獲?。? uni.removeStorageSync('tabParams'); } }
方法三:通過 getApp() 全局共享數(shù)據(jù)
在 App.vue 中定義全局變量:
// App.vue export default { globalData: { tabParams: null } }
跳轉(zhuǎn)前設(shè)置參數(shù):
// 原頁面 getApp().globalData.tabParams = { key: 'value' }; uni.switchTab({ url: '/pages/targetTab/targetTab' });
目標(biāo)頁面獲取參數(shù):
// 目標(biāo)頁面 onShow onShow() { const params = getApp().globalData.tabParams; if (params) { console.log('參數(shù):', params); getApp().globalData.tabParams = null; // 清除參數(shù) } }
總結(jié)
到此這篇關(guān)于uniapp switchtab傳參并接收參數(shù)三種方法的文章就介紹到這了,更多相關(guān)uniapp switchtab傳參并接收參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用JavaScript實(shí)現(xiàn)圖片的自動輪播
在網(wǎng)站開發(fā)中,經(jīng)常會遇到需要展示多張圖片并自動切換的需求,這就需要使用JavaScript來實(shí)現(xiàn)圖片的自動輪播功能,本文將通過一個簡單的例子,演示如何用JavaScript實(shí)現(xiàn)圖片的自動輪播,感興趣的同學(xué)可以自己動手試一試2023-09-09Javascript仿PHP $_GET獲取URL中的參數(shù)
這篇文章主要介紹了Javascript仿PHP $_GET獲取URL中的參數(shù)代碼實(shí)例,需要的朋友可以參考下2014-05-05微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能
這篇文章主要介紹了微信小程序項(xiàng)目實(shí)踐之九宮格實(shí)現(xiàn)及item跳轉(zhuǎn)功能,需要的朋友可以參考下2018-07-07微信小程序開發(fā)數(shù)據(jù)緩存基礎(chǔ)知識辨析及運(yùn)用實(shí)例詳解
這篇文章主要介紹了微信小程序開發(fā)數(shù)據(jù)緩存基礎(chǔ)知識辨析及運(yùn)用實(shí)例詳解,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11