uni-app uni-popup对话框未调用close方法却自动消失

uni-app uni-popup对话框未调用close方法却自动消失

操作步骤：

1

预期结果：

2

实际结果：

3

bug描述：

https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html
运行该页面最右下的例子，点击输入对话框后，点击确定，显示进度->3秒后对话框消失
然而实际上点击了确定后，对话框就立即消失了，如图
还没有调用this.$refs.xxx.close();就消失了

Image Image


更多关于uni-app uni-popup对话框未调用close方法却自动消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni-popup对话框未调用close方法却自动消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中使用uni-popup组件时，如果遇到未调用close方法却自动消失的问题，这通常是由于以下几个常见原因导致的：

  1. 定时器或异步操作导致组件销毁：如果你的代码中使用了定时器（如setInterval或setTimeout）或某些异步操作（如网络请求回调），并且这些操作在没有正确管理的情况下可能导致页面或组件重新渲染或销毁。

  2. 父组件状态变化：如果uni-popup的显示状态依赖于父组件的某个状态，而该状态在其他地方被意外修改，也可能导致uni-popup自动关闭。

  3. 路由跳转：在应用中进行页面跳转时，如果uni-popup组件不在当前页面的DOM树中，它将被自动销毁。

  4. 事件冒泡：有时候点击事件可能冒泡到父组件，触发了父组件中的某些逻辑，导致uni-popup关闭。

下面是一个简化的代码示例，展示了如何在uni-app中正确使用uni-popup，并避免上述一些问题：

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="myPopup" type="bottom" :show="isPopupVisible">
      <view>这是一个弹窗内容</view>
      <view class="popup-bottom-btn" @click="handleClose">确定</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPopupVisible: false
    };
  },
  methods: {
    showPopup() {
      this.isPopupVisible = true;
    },
    handleClose() {
      this.isPopupVisible = false;
    }
  },
  beforeDestroy() {
    // 清理定时器或取消异步操作，防止内存泄漏或意外行为
    // 例如：clearTimeout(this.someTimeoutId);
  }
};
</script>

<style>
.popup-bottom-btn {
  margin-top: 20px;
  text-align: center;
}
</style>

在上述代码中，uni-popup的显示状态通过isPopupVisible控制，点击按钮显示弹窗，点击弹窗内的按钮关闭弹窗。同时，在组件销毁前（beforeDestroy生命周期钩子）清理可能的定时器或异步操作，以避免意外行为。

确保你的应用中没有其他逻辑（如定时器、事件监听器等）在未经授权的情况下修改isPopupVisible的值，或者导致页面重新渲染，这样可以有效避免uni-popup未调用close方法却自动消失的问题。

回到顶部