uni-app uni-popup在自定义组件中不同页面重复触发时不显示

uni-app uni-popup在自定义组件中不同页面重复触发时不显示

操作步骤：

1： 点击页面A（首页）的子组件中”获取ref“，弹窗正常弹出； 2： 点击首页的子组件的空白区域，正常跳转到页面B，点击页面B中的”获取ref“，弹窗正常弹出，点击关闭，并且点击返回按钮，正常返回到页面A； 3：再次重复步骤1，出现异常，弹窗未正常弹出

预期结果：

希望在页面A和页面B中，不论怎么来换切换，点击‘获取ref’后，弹窗都能正常弹出

实际结果：

弹窗未正常弹出

bug描述：

代码如附件所示

1 回复

更多关于uni-app uni-popup在自定义组件中不同页面重复触发时不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-popup 自定义组件时，如果在不同页面中重复触发 uni-popup 但不显示，可能是由于以下几个原因导致的。以下是一些可能的解决方案：

1. 组件未正确引入或注册

确保你在每个页面中正确引入并注册了 uni-popup 组件。

// 在页面中引入 uni-popup 组件
import uniPopup from '@/components/uni-popup/uni-popup.vue';

export default {
  components: {
    uniPopup
  }
}

2. 组件的 ref 未正确设置

uni-popup 通常通过 ref 来调用其方法（如 open 和 close）。确保你在每个页面中正确设置了 ref。

<uni-popup ref="popup">
  <!-- 弹窗内容 -->
</uni-popup>

// 在方法中调用 popup
this.$refs.popup.open();

3. 组件未正确初始化

有时，uni-popup 组件可能未正确初始化。你可以尝试在 mounted 生命周期钩子中手动初始化组件。

mounted() {
  this.$nextTick(() => {
    this.$refs.popup.init();
  });
}

4. 组件被覆盖或未正确显示

确保 uni-popup 组件的样式没有被其他元素覆盖，或者 z-index 设置过低导致无法显示。

.uni-popup {
  z-index: 9999; /* 确保 popup 在最上层 */
}

5. 页面切换时组件状态未重置

如果你在页面切换时未重置 uni-popup 的状态，可能会导致组件无法正常显示。你可以在页面离开时手动关闭 uni-popup。

beforeDestroy() {
  this.$refs.popup.close();
}

6. 组件未正确销毁

在某些情况下，uni-popup 组件可能未正确销毁，导致在页面切换时出现问题。你可以尝试在页面离开时手动销毁组件。

beforeDestroy() {
  this.$refs.popup.destroy();
}

7. 检查 uni-popup 版本

如果你使用的是旧版本的 uni-popup，可能存在一些已知的 bug。建议更新到最新版本。

npm update uni-popup

8. 调试与排查

如果以上方法都无法解决问题，建议通过 console.log 或调试工具逐步排查问题，检查 uni-popup 的状态和方法调用是否正确。

console.log(this.$refs.popup); // 检查 popup 是否被正确引用

9. 使用 uni.showModal 替代

如果 uni-popup 在特定场景下无法正常工作，可以考虑使用 uni.showModal 或其他弹窗组件作为临时替代方案。

uni.showModal({
  title: '提示',
  content: '这是一个弹窗',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
    } else if (res.cancel) {
      console.log('用户点击取消');
    }
  }
});
回到顶部