uni-app #bug# 录的视频已存在待跳转页面/pages/detail/goodsinfo 请不要连续多次跳转页面/pages/detail/goodsinfo

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app #bug# 录的视频已存在待跳转页面/pages/detail/goodsinfo 请不要连续多次跳转页面/pages/detail/goodsinfo

image

问题：自定义基座运行 最新版HB开发工具， 页面跳转用的是 navigateTo ，只要我页面一秒内快点几次页面，IDE控制台就会出现上图的这种，，，app上面再点任何按钮 都会无任何反应，，，官方能否给个答复，，

请求过去的页面 是读取网络数据的， 不读取网络数据的出现的频率少， 我想知道是我的问题 还是大家都有这种问题啊

uni.navigateTo({  
   url: '/pages/member/publisher?uid=' + userId + '&token=' + token  
});

百度一下 很多人遇到这种问题 应该不是我一个人的问题， https://www.baidu.com/s?ie=UTF-8&wd=已存在待跳转页面,请不要连续多次跳转页面/pages/detail/goodsinfo

然后我又新建了一个新的hello uniapp项目（演示uni-app框架的组件 接口 模板）打开去快速点击新闻详情到列表，，发现快速点击也能出现这种问题，，再下面附件中（完整问题再现.zip）

image

完整问题再现.zip


Harmonyos Next教程
6 回复

防抖节流了解一下


感谢老铁的提醒，思路顿时清晰

压缩包里是我录的问题再现视频，

我也遇到这个问题了

同上

针对你提到的 uni-app 中关于页面跳转的问题，即在检测到视频已存在于待跳转页面 /pages/detail/goodsinfo 时，避免连续多次跳转至同一页面，可以通过多种方式来实现。这里提供一个基于 Vue 框架和 uni-app 提供的 API 的代码示例，利用 Vuex 状态管理以及页面路由守卫来实现这一功能。

1. 使用 Vuex 管理视频状态

首先，在 Vuex 中创建一个状态来跟踪当前是否已打开某个视频的详情页面。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isGoodsInfoPageOpen: false  // 用于标记 goodsinfo 页面是否已打开
  },
  mutations: {
    setGoodsInfoPageOpen(state, isOpen) {
      state.isGoodsInfoPageOpen = isOpen;
    }
  },
  actions: {
    toggleGoodsInfoPage({ commit }, isOpen) {
      commit('setGoodsInfoPageOpen', isOpen);
    }
  }
});

2. 在页面组件中使用 Vuex 状态

在触发跳转的组件中，先检查 Vuex 状态，再决定是否进行页面跳转。

// 触发跳转的组件
<template>
  <view>
    <button @click="navigateToGoodsInfo">查看视频详情</button>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['isGoodsInfoPageOpen'])
  },
  methods: {
    ...mapActions(['toggleGoodsInfoPage']),
    navigateToGoodsInfo() {
      if (!this.isGoodsInfoPageOpen) {
        this.$store.dispatch('toggleGoodsInfoPage', true);
        uni.navigateTo({
          url: '/pages/detail/goodsinfo'
        });
      } else {
        // 可选：提示用户页面已打开或执行其他逻辑
        uni.showToast({
          title: '视频详情页已打开',
          icon: 'none'
        });
      }
    }
  },
  onUnload() {
    // 页面卸载时重置状态
    this.$store.dispatch('toggleGoodsInfoPage', false);
  }
};
</script>

3. 注意事项

  • 确保在离开 /pages/detail/goodsinfo 页面时重置 isGoodsInfoPageOpen 状态，避免状态不一致。
  • 考虑到用户可能通过其他方式（如返回按钮）离开详情页，onUnload 生命周期函数是一个合适的重置状态的位置。
  • 上述代码示例未包含所有可能的边界情况处理，如应用进入后台、页面被系统回收等，根据实际需求可能需要进一步完善。

通过上述方法，可以有效避免在 uni-app 中因检测到视频已存在于待跳转页面时而导致的连续多次跳转问题。

回到顶部