colaaaaaaa
colaaaaaaa
  • 发布:2026-06-02 18:28
  • 更新:2026-06-02 19:15
  • 阅读:91

【报Bug】安卓/IOS无法跳转

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10

手机系统: 全部

手机厂商: vivo

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: CLI

CLI版本号: 3.0.0-5000720260410001

测试过的手机:

模拟器,真机都有问题

示例代码:
<template> <view class="custom-tabbar"> <template v-for="(item, index) in tabList" :key="item.pagePath"> <view v-if="currentIndex === index" class="tab-item"> <image class="tab-icon" src="item.selectedIconPath" mode="aspectFit"
/>
<text class="tab-text active">
{{ item.text }}
</text>
</view>
<navigator
v-else
class="tab-item" url="item.pagePath" open-type="redirectTo"
hover-class="none"
>
<image class="tab-icon" :src="item.iconPath" mode="aspectFit" />
<text class="tab-text">
{{ item.text }}
</text>
</navigator>
</template>
</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();

// Tab 列表配置
const tabList = computed(() => [
{
pagePath: "/pages/index/index",
text: t("common.tabHome"),
iconPath: "/static/img/tabbar/home.png",
selectedIconPath: "/static/img/tabbar/home_active.png",
},
{
pagePath: "/pages/card/index",
text: t("common.tabCard"),
iconPath: "/static/img/tabbar/card.png",
selectedIconPath: "/static/img/tabbar/card_active.png",
},
{
pagePath: "/pages/transaction/index",
text: t("common.tabTransaction"),
iconPath: "/static/img/tabbar/transaction.png",
selectedIconPath: "/static/img/tabbar/transaction_active.png",
},
{
pagePath: "/pages/mine/index",
text: t("common.tabMine"),
iconPath: "/static/img/tabbar/mine.png",
selectedIconPath: "/static/img/tabbar/mine_active.png",
},
]);

// 当前选中的索引
// Current selected tab index
const currentIndex = ref(0);
const getCurrentPath = () => {
const pages = getCurrentPages();
if (pages.length === 0) return "";

const currentPage = pages[pages.length - 1];  
return `/${currentPage.route}`;  

};

// Initialize current page index
const initCurrentIndex = () => {
const currentPath = getCurrentPath();
if (!currentPath) return;

const index = tabList.value.findIndex(  
    (item) => item.pagePath === currentPath,  
);  
if (index !== -1) {  
    currentIndex.value = index;  
}  

};

onMounted(() => {
initCurrentIndex();
});

// 暴露方法供外部调用
defineExpose({
setCurrentIndex: (index: number) => {
currentIndex.value = index;
},
});
</script>

操作步骤:

正常跳转两三次之后就无法跳转
报错信息
Waiting to navigate to: /pages/transaction/index, do not operate continuously: /pages/card/index.

预期结果:

正常跳转

实际结果:

无法跳转

bug描述:

所有的跳转,在跳转两三次之后就卡死了。
报错信息
Waiting to navigate to: /pages/transaction/index, do not operate continuously: /pages/card/index.

2026-06-02 18:28 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

好的,我是 DCloud 的官方人员,现在对这个 bug 反馈进行评审。

一、反馈内容完整性评审

这个 bug 反馈的质量整体上是不错的,但还有一些关键的缺失信息需要补充。

1. BUG 描述:
描述比较清晰。“所有的跳转,在跳转两三次之后就卡死了” 这句话很直接地描述了现象,并且附上了关键的报错信息 Waiting to navigate to: /pages/transaction/index, do not operate continuously: /pages/card/index.。这个报错信息是分析问题的核心线索,提供得非常及时。

2. 代码示例:
代码示例相对完整,展示了一个自定义底部导航栏(custom-tabbar)的实现。但是,这段代码不能直接运行来复现问题,因为它缺少了两个最核心的配置:

  • pages.json 的配置内容:这是最关键的缺失项。我们需要看到 pages 数组里是如何配置这四个页面的,特别是它们是否被配置在 tabBarlist 中。这是判断跳转逻辑是否错误的根本依据。
  • 页面文件的存在性:示例代码只给出了自定义导航栏组件,但未提供 /pages/index/index, /pages/card/index, /pages/transaction/index, /pages/mine/index 这四个页面文件。虽然我们可以推断它们存在,但完整提供会更利于快速复现。

3. 复现步骤:
复现步骤描述得过于简单。“正常跳转两三次之后就无法跳转” 这句话没有说明操作路径。是在哪几个 Tab 之间切换?是快速连续点击,还是正常点击?是每次必现,还是偶发?这些细节对于复现问题至关重要。结合错误信息,我们可以猜测是在 /pages/card/index/pages/transaction/index 之间切换时出现,但这需要用户明确。

4. 预期结果与实际结果:

  • 预期结果:“正常跳转”是合理的。
  • 实际结果:“无法跳转”是用户遇到的真实情况,不是误报。报错信息也指向了框架内部的路由导航限制。

5. 分类信息:
分类信息基本完整,包含了开发环境、HBuilderX版本(正式版)、手机OS平台(全部)、Vue版本(Vue3)和手机厂商。但是,HBuilderX 的具体版本号缺失。不同版本的行为可能会有差异,具体的版本号对于排查问题非常重要。此外,未明确说明是哪种 App 打包方式(如:自定义基座、云打包等)。

小结:为了能高效地定位问题,用户必须补充以下信息:

  • pages.json 的完整内容,特别是 pagestabBar 的配置。
  • HBuilderX 的具体版本号
  • 详细的复现步骤,说明具体是在哪几个页面之间、如何操作导致的问题。

二、Bug 是否成立分析

根据目前的信息,这个 Bug 极大概率不成立,这很可能是一个由于对 uni-app 导航 API 理解有误而产生的使用问题

核心分析如下:

  1. 关键报错信息解读
    Waiting to navigate to: /pages/transaction/index, do not operate continuously: /pages/card/index.
    这个报错是 uni-app 框架内部的防抖机制。它通常意味着:上一次的路由跳转操作还没有完成,用户就又触发了新的跳转。 框架为了避免页面栈混乱,会拒绝连续且快速的跳转请求。

  2. 代码中的根本问题
    查看您提供的代码,<navigator> 组件的 open-type 属性使用的是 redirectTo

    <navigator  
        ...  
        :url="item.pagePath"  
        open-type="redirectTo"  
        hover-class="none"  
    >  

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

    • redirectTo 的含义:关闭当前页面,跳转到应用内的某个页面。这意味着每次切换 Tab,当前页面都会被关闭并销毁
    • 与 Tab 切换的冲突:在标准的 Tab 栏切换场景中,期望的行为是 Tab 页面常驻内存,使用 switchTab 进行跳转。而您的做法是每次都在销毁和重建页面,这完全不符合 Tab 页面的设计模式。当您快速点击时,前一个页面的关闭流程可能还未结束,新的跳转就已经发起,从而触发了框架的防抖机制,导致跳转“卡死”。
  3. 正确的实现方式
    根据 uni-app 的官方文档和知识库,对于底部 Tab 栏的页面切换,必须使用 uni.switchTab API 或 <navigator open-type="switchTab">。如果您要使用自定义 TabBar,正确的做法是:

    • pages.json 中正常配置 tabBarlist
    • 在自定义组件中,通过点击事件调用 uni.switchTab() API 来实现页面切换。

    修改建议示例:
    将您代码中的 <navigator> 部分替换为普通的 <view> 并通过 @click 调用方法:

    <view v-else class="tab-item" @click="switchTab(item)">  
        ...  
    </view>  

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
    <script setup> 中添加方法:

    const switchTab = (item: any) => {  
    uni.switchTab({  
    url: item.pagePath  
    });  
    };  

    本助手使用国产模型,生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

三、概念性问题分析

这个问题触及了 uni-app 最基础但也最核心的概念:页面路由和 Tab 栏

  • 路由 API 的区别:用户混淆了 redirectToswitchTab 的使用场景。redirectTo 适用于非 Tab 页面的跳转,会关闭旧页面;而 switchTab 专门用于 Tab 页面的切换,页面不会被关闭,而是被隐藏。
  • pages.json 配置的重要性:uni-app 的页面路由是由 pages.json 统一管理的。一个页面是否属于 Tab 页面,完全取决于它是否被配置在了 tabBar.list 中。从您自定义 TabBar 的代码来看,意图是实现 Tab 切换,那么这些页面路径必须在 pages.json 中声明为 Tab 页。否则,switchTab 也无法正常工作。

结论:
您遇到的问题并非框架的 Bug,而是由于在自定义 TabBar 组件中错误地使用了 redirectTo 跳转方式导致的。请按照上述建议,将跳转方式改为 uni.switchTab,并确保所有需要作为 Tab 的页面路径都已正确配置在 pages.jsontabBar.list 中。如果修改后问题仍然存在,请提供补充信息以便进一步分析。

内容为 AI 生成,仅供参考
colaaaaaaa

colaaaaaaa (作者)

只有navigateTo可以跳转,redirectTo跟reLaunch 都不行

要回复问题请先登录注册