uniapp switchtab传参并接收参数三种方法
作者:深漂小码哥
uniapp内置多种跳转方式,下面这篇文章主要给大家介绍了关于uniapp switchtab传参并接收参数的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
方法一:使用全局变量(推荐)
在跳转前存储数据:
// 在需要跳转的页面 const app = getApp(); app.globalData.tabParams = { key: 'value' // 自定义参数 }; uni.switchTab({ url: '/pages/targetTab/targetTab' });
在目标页面获取数据:
// 目标 tab 页面的 onShow 生命周期中 onShow() { const app = getApp(); const params = app.globalData.tabParams; if (params) { console.log('接收参数:', params); // 使用后清除参数(避免重复获取) delete app.globalData.tabParams; } }
方法二:使用本地存储(如 uni.setStorageSync)
在跳转前存储数据:
// 在需要跳转的页面 uni.setStorageSync('tabParams', { key: 'value' // 自定义参数 }); uni.switchTab({ url: '/pages/targetTab/targetTab' });
在目标页面获取数据:
// 目标 tab 页面的 onShow 生命周期中 onShow() { const params = uni.getStorageSync('tabParams'); if (params) { console.log('接收参数:', params); // 使用后清除存储(避免重复获取) uni.removeStorageSync('tabParams'); } }
方法三:通过 getApp() 全局共享数据
在 App.vue 中定义全局变量:
// App.vue export default { globalData: { tabParams: null } }
跳转前设置参数:
// 原页面 getApp().globalData.tabParams = { key: 'value' }; uni.switchTab({ url: '/pages/targetTab/targetTab' });
目标页面获取参数:
// 目标页面 onShow onShow() { const params = getApp().globalData.tabParams; if (params) { console.log('参数:', params); getApp().globalData.tabParams = null; // 清除参数 } }
总结
到此这篇关于uniapp switchtab传参并接收参数三种方法的文章就介绍到这了,更多相关uniapp switchtab传参并接收参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!