uniapp上滑弹窗消失如何解决

在uniapp开发中，上滑页面时弹窗会自动消失，如何解决这个问题？弹窗使用了uni-popup组件，设置了mask-click为false，但上滑页面仍会导致弹窗关闭。希望有处理过类似问题的大神指点解决方案。

2 回复

在uniapp中，上滑弹窗消失通常是因为弹窗层级问题或事件冲突。可以尝试以下方法：

  1. 设置弹窗z-index为较大值（如9999）。
  2. 检查是否触发了页面滚动，可在弹窗内使用@touchmove.stop阻止事件冒泡。
  3. 使用position: fixed定位弹窗。

若仍有问题，建议检查代码逻辑或提供更多细节。


在Uniapp中，上滑弹窗消失通常是由于弹窗组件未正确处理触摸事件导致的。以下是几种常见解决方案：

方法一：阻止弹窗内滑动事件冒泡

<template>
  <view>
    <!-- 弹窗内容 -->
    <view class="popup" @touchmove.stop.prevent>
      <!-- 弹窗内容 -->
    </view>
  </view>
</template>

方法二：使用官方弹窗组件

<template>
  <view>
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <!-- 弹窗内容 -->
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    showPopup() {
      this.$refs.popup.open()
    },
    hidePopup() {
      this.$refs.popup.close()
    }
  }
}
</script>

方法三：自定义弹窗组件

<template>
  <view>
    <!-- 遮罩层 -->
    <view 
      v-if="show" 
      class="mask" 
      @touchmove.stop.prevent
      @click="closePopup"
    >
      <!-- 弹窗内容 -->
      <view 
        class="popup-content" 
        @touchmove.stop
        @click.stop
      >
        <text>弹窗内容</text>
        <button @click="closePopup">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    closePopup() {
      this.show = false
    }
  }
}
</script>

<style>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
}
</style>

关键点总结：

  1. 使用 @touchmove.stop.prevent 阻止触摸事件冒泡
  2. 遮罩层和弹窗内容都要处理触摸事件
  3. 使用官方 uni-popup 组件更稳定
  4. 确保弹窗有合适的 z-index 值

选择其中一种方法即可解决上滑弹窗消失的问题。

回到顶部