uni-app showTabBar/hideTabBar在【Vue2/Vue3】环境下表现不一致

uni-app showTabBar/hideTabBar在【Vue2/Vue3】环境下表现不一致

操作步骤：

VUE2  
created() {  
    uni.showTabBar({  
        fail: (err)=>{  
            console.log('Vue2 fail', err)  

        },  
        success: (res)=>{  
            console.log('Vue2 success', res)  

        },  
        complete: (res) => {  
        }  
    });  
}

Vue3  
created() {  
    uni.showTabBar({  
        fail: (err)=>{  
            console.log('Vue3 fail', err)  

        },  
        success: (res)=>{  
            console.log('Vue3 success', res)  

        },  
        complete: (res) => {  
        }  
    });  
}

预期结果：

  • Vue2与Vue3应该表现一致

实际结果：

  • Vue2报失败
  • Vue3报成功

bug描述：

Hello-Uniapp项目 分别创建Vue2 Vue3项目
showTabBar在两个环境下的不同响应

附件：

Image 1

Image 2


更多关于uni-app showTabBar/hideTabBar在【Vue2/Vue3】环境下表现不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

预计下版修复，临时解决方案
附件替换至
hx 根目录\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-h5\dist
重新运行试试看

更多关于uni-app showTabBar/hideTabBar在【Vue2/Vue3】环境下表现不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


4.18 alpha 已修复

在 uni-app 中，showTabBar 和 hideTabBar 是用来控制底部 TabBar 显示和隐藏的 API。然而，在 Vue2 和 Vue3 环境下，这两个 API 的表现可能会有所不同，尤其是在处理异步操作、生命周期钩子、以及响应式数据时。以下是一些可能的表现不一致的原因及解决方法：

1. 生命周期钩子的差异

  • Vue2：在 Vue2 中，created 和 mounted 钩子是同步执行的，因此在这些钩子中调用 showTabBar 或 hideTabBar 通常会立即生效。
  • Vue3：在 Vue3 中，setup 函数是异步执行的，可能会导致 showTabBar 或 hideTabBar 的调用时机与预期不一致。

解决方法：

  • 在 Vue3 中，确保在组件挂载完成后再调用 showTabBar 或 hideTabBar。可以使用 onMounted 钩子：
    import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      uni.hideTabBar(); // 或 uni.showTabBar()
    });
  },
};

2. 响应式数据的影响

  • Vue2：在 Vue2 中，data 是响应式的，但直接修改 data 并不会触发 showTabBar 或 hideTabBar 的重新执行。
  • Vue3：在 Vue3 中，ref 或 reactive 创建的响应式数据可能会触发组件的重新渲染，进而影响 showTabBar 或 hideTabBar 的行为。

解决方法：

  • 确保在调用 showTabBar 或 hideTabBar 时，相关的响应式数据已经更新完毕。可以使用 watch 监听数据变化：
    import { ref, watch } from 'vue';

export default {
  setup() {
    const showTab = ref(false);

    watch(showTab, (newVal) => {
      if (newVal) {
        uni.showTabBar();
      } else {
        uni.hideTabBar();
      }
    });

    return { showTab };
  },
};

3. 异步操作的差异

  • Vue2：在 Vue2 中，异步操作（如 setTimeout 或 Promise）通常不会影响 showTabBar 或 hideTabBar 的调用。
  • Vue3：在 Vue3 中，异步操作可能会导致 showTabBar 或 hideTabBar 的调用时机与预期不一致，尤其是在 setup 函数中。

解决方法：

  • 确保在异步操作完成后再调用 showTabBar 或 hideTabBar。例如：
    import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(async () => {
      await someAsyncFunction();
      uni.hideTabBar(); // 或 uni.showTabBar()
    });
  },
};

4. 平台差异

  • 在某些平台（如微信小程序）上，showTabBar 和 hideTabBar 的行为可能会受到平台限制或 bug 的影响。
  • 在 Vue2 和 Vue3 环境下，不同平台的兼容性表现可能不一致。

解决方法：

  • 检查目标平台的文档，确保 API 的调用方式符合平台要求。
  • 使用条件编译处理平台差异：
    #ifdef MP-WEIXIN
uni.hideTabBar();
#endif

5. API 调用时机

  • showTabBar 和 hideTabBar 的调用时机非常重要。如果在页面切换或组件卸载时调用，可能会导致意外行为。
  • 在 Vue2 和 Vue3 环境下，组件的生命周期不同，可能会影响 API 的调用时机。

解决方法：

  • 确保在适当的生命周期钩子中调用 showTabBar 或 hideTabBar。例如，在页面 onShow 或 onHide 中调用：
    export default {
  onShow() {
    uni.showTabBar();
  },
  onHide() {
    uni.hideTabBar();
  },
};
回到顶部