uni-app中uni-popup从底部弹出后修改页面内image的src地址，unipopup会消失但popup的mask仍在

uni-app中uni-popup从底部弹出后修改页面内image的src地址，unipopup会消失但popup的mask仍在

操作步骤：

如题

预期结果：

如题

实际结果：

如题

bug描述：

【报Bug】uni-popup已经从底部弹出后再修改页面内image的src地址后，unipopup会消失然后popup的mask却还在，有办法在修改image地址后而不让popup消失么



| 项目名称         | 信息           |
|------------------|----------------|
| 产品分类         | uniapp/App     |
| PC开发环境       | Windows        |
| PC开发环境版本   | win11          |
| HBuilderX类型   | 正式           |
| HBuilderX版本    | 3.4.7          |
| 手机系统         | iOS            |
| 手机系统版本     | iOS 15         |
| 手机厂商         | 苹果           |
| 手机机型         | 12pro          |
| 页面类型         | vue            |
| vue版本          | vue2           |
| 打包方式         | 云端           |
| 项目创建方式     | HBuilderX      |

更多关于uni-app中uni-popup从底部弹出后修改页面内image的src地址，unipopup会消失但popup的mask仍在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

具体代码贴一下

更多关于uni-app中uni-popup从底部弹出后修改页面内image的src地址，unipopup会消失但popup的mask仍在的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 uni-popup 时，如果你从底部弹出 uni-popup 并尝试修改页面内 image 的 src 地址，可能会导致 uni-popup 消失但遮罩层（mask）仍然存在的情况。这通常是因为修改 image 的 src 地址可能会触发页面的重新渲染，导致 uni-popup 的状态被重置。

解决方案

  1. 确保 uni-popup 的状态不会因页面更新而被重置：

    • 在修改 image 的 src 地址时，确保不会触发页面的重新渲染。你可以使用 Vue 的响应式数据来管理 image 的 src，而不是直接操作 DOM。

  2. 手动控制 uni-popup 的显示和隐藏：

    • 在修改 image 的 src 地址后，手动调用 uni-popup 的 close 方法来关闭 uni-popup，并确保遮罩层也被正确移除。

  3. 使用 v-if 或 v-show 控制 uni-popup 的显示：

    • 通过 v-if 或 v-show 来控制 uni-popup 的显示和隐藏，确保在修改 image 的 src 地址时，uni-popup 的状态不会被意外重置。

示例代码

<template>
  <view>
    <!-- 页面内容 -->
    <image :src="imageSrc" @click="showPopup"></image>

    <!-- uni-popup -->
    <uni-popup ref="popup" type="bottom" :mask="true" @change="onPopupChange">
      <view class="popup-content">
        <button @click="changeImageSrc">修改图片地址</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image1.jpg',
      popupVisible: false
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
      this.popupVisible = true;
    },
    changeImageSrc() {
      this.imageSrc = 'https://example.com/image2.jpg';
      this.$refs.popup.close();
      this.popupVisible = false;
    },
    onPopupChange(e) {
      if (!e.show) {
        this.popupVisible = false;
      }
    }
  }
};
</script>

<style>
.popup-content {
  padding: 20px;
  background-color: #fff;
}
</style>
回到顶部