uni-app 【报Bug】uni.preloadPage预加载tabBar页面时，uni.switchTab方法不跳转页面

uni-app 【报Bug】uni.preloadPage预加载tabBar页面时，uni.switchTab方法不跳转页面

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：小米10

页面类型：nvue

vue版本：vue3

打包方式：离线

项目创建方式：HBuilderX

示例代码：

```html
<template>
<view>登录</view>
</template>  

<script>
export default {
onLoad() {
console.log('监听页面加载')
uni.preloadPage({ url: "/pages/tabBar/home/index"})
setTimeout(()=> {
uni.switchTab({ url: "/pages/tabBar/mall/index"})
},3000)
}
}
</script>

操作步骤：

<template>
<view>登录</view>
</template>  

<script>
export default {
onLoad() {
console.log('监听页面加载')
uni.preloadPage({ url: "/pages/tabBar/home/index"})
setTimeout(()=> {
uni.switchTab({ url: "/pages/tabBar/mall/index"})
},3000)
}
}
</script>

预期结果： 页面跳转

实际结果： 页面不跳转

bug描述： 经测试，使用vue3编译就有这个问题！！官方bug无疑！ 在nvue启动页首页 使用 uni.preloadPage预加载tabBar页面， 在使用uni.switchTab跳转页面， success函数都成功了，页面没有发生跳转


更多关于uni-app 【报Bug】uni.preloadPage预加载tabBar页面时，uni.switchTab方法不跳转页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

你多点几次呢？

更多关于uni-app 【报Bug】uni.preloadPage预加载tabBar页面时，uni.switchTab方法不跳转页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


点烂了也没有用

你把你完整的demo能给一下不

使用vue3版本编译就有问题

好的，我试下

同样

打包成apk之后自定义tabbar切换就不流畅了；

在使用 uni.preloadPage 预加载 tabBar 页面时，可能会遇到 uni.switchTab 方法不跳转页面的问题。这通常是由于 uni.preloadPage 和 uni.switchTab 之间的兼容性问题导致的。

问题原因

uni.preloadPage 是用于预加载页面的方法，而 uni.switchTab 是用于切换 tabBar 页面的方法。在某些情况下，uni.preloadPage 可能会干扰 uni.switchTab 的正常工作，导致页面无法正确跳转。

解决方案

以下是一些可能的解决方案：

  1. 避免预加载 tabBar 页面： 如果 tabBar 页面不需要预加载，可以避免使用 uni.preloadPage 来预加载这些页面。

    // 避免预加载 tabBar 页面
uni.preloadPage({
    url: '/pages/nonTabBarPage' // 预加载非 tabBar 页面
});

  2. 使用 uni.reLaunch 或 uni.redirectTo 代替 uni.switchTab： 如果 tabBar 页面已经预加载，可以尝试使用 uni.reLaunch 或 uni.redirectTo 来跳转页面，而不是使用 uni.switchTab。

    uni.reLaunch({
    url: '/pages/tabBarPage'
});

    或者：

    uni.redirectTo({
    url: '/pages/tabBarPage'
});

  3. 延迟执行 uni.switchTab： 在某些情况下，延迟执行 uni.switchTab 可能会解决问题。可以尝试使用 setTimeout 来延迟跳转。

    setTimeout(() => {
    uni.switchTab({
        url: '/pages/tabBarPage'
    });
}, 100); // 延迟 100 毫秒

  4. 检查 tabBar 配置： 确保 tabBar 页面的路径配置正确，并且 tabBar 页面在 pages.json 中正确声明。

    {
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/tabBarPage",
                "text": "TabBar Page"
            }
        ]
    }
}

  5. 更新 uni-app 版本： 如果问题是由于 uni-app 的 bug 导致的，可以尝试更新到最新版本，看看问题是否已经修复。

    npm update [@dcloudio](/user/dcloudio)/uni-app
回到顶部