- 发布:2026-06-02 18:28
- 更新:2026-06-02 19:15
- 阅读:91
产品分类: 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>
/>
<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.
正常跳转两三次之后就无法跳转
报错信息
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.
2 个回复
Ask小助手
好的,我是 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数组里是如何配置这四个页面的,特别是它们是否被配置在tabBar的list中。这是判断跳转逻辑是否错误的根本依据。/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的完整内容,特别是pages和tabBar的配置。二、Bug 是否成立分析
根据目前的信息,这个 Bug 极大概率不成立,这很可能是一个由于对 uni-app 导航 API 理解有误而产生的使用问题。
核心分析如下:
关键报错信息解读:
Waiting to navigate to: /pages/transaction/index, do not operate continuously: /pages/card/index.这个报错是 uni-app 框架内部的防抖机制。它通常意味着:上一次的路由跳转操作还没有完成,用户就又触发了新的跳转。 框架为了避免页面栈混乱,会拒绝连续且快速的跳转请求。
代码中的根本问题:
查看您提供的代码,
<navigator>组件的open-type属性使用的是redirectTo。正确的实现方式:
根据 uni-app 的官方文档和知识库,对于底部 Tab 栏的页面切换,必须使用
uni.switchTabAPI 或<navigator open-type="switchTab">。如果您要使用自定义 TabBar,正确的做法是:pages.json中正常配置tabBar的list。uni.switchTab()API 来实现页面切换。修改建议示例:
将您代码中的
<navigator>部分替换为普通的<view>并通过@click调用方法:三、概念性问题分析
这个问题触及了 uni-app 最基础但也最核心的概念:页面路由和 Tab 栏。
redirectTo和switchTab的使用场景。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.json的tabBar.list中。如果修改后问题仍然存在,请提供补充信息以便进一步分析。colaaaaaaa (作者)
只有navigateTo可以跳转,redirectTo跟reLaunch 都不行
要回复问题请先登录或注册
公告
更多>相关问题