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传参并接收参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论