uni-app tabBar数量是3个时 真机运行跳转出错

uni-app tabBar数量是3个时 真机运行跳转出错

示例代码：

"pages": [{  
    "path": "pages/login",  
    "style": {  
        "navigationBarTitleText": "登录",  
        "navigationStyle": "custom",  
        "app-plus": {  
            "bounce": "none"  
        }  
    }  
}, {  
    "path": "pages/home/home",  
    "style": {  
        "navigationBarTitleText": "首页",  
        "navigationBarBackgroundColor": "#007AFF",  
        "navigationBarTextStyle": "white",  
        "app-plus": {  
            "bounce": "none"  
        }  
    }  
},  
{  
    "path": "pages/features/features",  
    "style": {  
        "navigationBarTitleText": "功能",  
        "navigationBarBackgroundColor": "#007AFF",  
        "navigationBarTextStyle": "white",  
        "app-plus": {  
            "bounce": "none"  
        }  
    }  
//..........  
}]  

"tabBar": {  
    "color": "#7A7E83",  
    "selectedColor": "#1296db",  
    "borderStyle": "black",  
    "backgroundColor": "#ffffff",  
    "list": [{  
        "pagePath": "pages/home/home",  
        "iconPath": "static/img/footer/footer-home.png",  
        "selectedIconPath": "static/img/footer/footer-home-act.png",  
        "text": "首页"  
    }, {  
        "pagePath": "pages/features/features",  
        "iconPath": "static/img/footer/features.png",  
        "selectedIconPath": "static/img/footer/features1.png",  
        "text": "功能"  
    }, {  
        "pagePath": "pages/me/me",  
        "iconPath": "static/img/footer/footer-member.png",  
        "selectedIconPath": "static/img/footer/footer-member-act.png",  
        "text": "我的"  

    }]  
}

操作步骤：

//只需要设置3个tabBar 打包后 或者真机调试 便可复现


## 预期结果：


//预期进入登录页 或者首页

实际结果：

//实际跳过登录页 跳过其他页 跳转至 我的


## bug描述：


tabBar 设置数量上   如果设置tabBar数量是3个  就会出现bug  
在app 端  运行时   会报错(附件)  

这时  路由会忽略图二中的路由配置顺序  直接跳转到 我的 tabBar中

image

项目信息

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 20H2
HBuilderX类型 正式
HBuilderX版本号 3.1.12
手机系统 Android
手机系统版本号 Android 11
手机厂商 小米
手机机型 redme note10 pro
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app tabBar数量是3个时 真机运行跳转出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app tabBar数量是3个时 真机运行跳转出错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的配置和问题描述，这是一个典型的 tabBar 页面初始化路由问题。在 uni-app 中，tabBar 页面默认会被作为应用启动时的初始页面。

在你的 pages.json 配置中，第一个页面是登录页（pages/login），但 tabBar 中的页面（home、features、me）都没有被设置为首页。当应用启动时，框架会优先加载 tabBar 中的第一个页面（home），但由于你的路由配置顺序，可能导致路由跳转逻辑混乱。

解决方案：

  1. 将首页（pages/home/home）设置为 pages 数组的第一项
  2. 或者在应用启动时使用 uni.reLaunch 或 uni.switchTab 手动控制跳转到登录页

修改后的 pages.json 示例：

"pages": [
    {  
        "path": "pages/home/home",  
        "style": {  
            "navigationBarTitleText": "首页",  
            "navigationBarBackgroundColor": "#007AFF",  
            "navigationBarTextStyle": "white",  
            "app-plus": {  
                "bounce": "none"  
            }  
        }  
    },
    {  
        "path": "pages/login",  
        "style": {  
            "navigationBarTitleText": "登录",  
            "navigationStyle": "custom",  
            "app-plus": {  
                "bounce": "none"  
            }  
        }  
    },
    // 其他页面...
]
回到顶部