uni-app cover-view与web-view组件共用时 v-if由true转false未完全隐藏

在 uni-app 中，当你同时使用 cover-view 和 web-view 组件，并且通过 v-if 控制它们的显示与隐藏时，可能会遇到 v-if 由 true 转为 false 时，组件未完全隐藏的问题。这通常是由于 cover-view 和 web-view 的渲染机制导致的。

问题原因

cover-view 是覆盖在原生组件之上的视图容器，而 web-view 是一个原生组件。原生组件的渲染和普通组件的渲染机制不同，可能会导致 v-if 切换时，cover-view 无法正确隐藏。

解决方案

以下是几种可能的解决方案：

1. 使用 v-show 替代 v-if

v-show 是通过 CSS 的 display 属性来控制组件的显示与隐藏，而不是直接销毁和重建组件。这样可以避免 v-if 切换时可能带来的渲染问题。

<template>
  <view>
    <cover-view v-show="isVisible">Cover View Content</cover-view>
    <web-view v-show="isVisible" src="https://example.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

2. 使用 key 强制重新渲染

通过给 cover-view 和 web-view 添加 key 属性，可以在 v-if 切换时强制重新渲染组件。

<template>
  <view>
    <cover-view v-if="isVisible" :key="isVisible">Cover View Content</cover-view>
    <web-view v-if="isVisible" :key="isVisible" src="https://example.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

3. 使用 z-index 控制层级

如果 cover-view 未完全隐藏，可能是因为它的 z-index 设置过高，导致它仍然显示在其他内容之上。你可以尝试调整 cover-view 的 z-index 值，确保它在隐藏时不会遮挡其他内容。

<template>
  <view>
    <cover-view v-if="isVisible" style="z-index: 1;">Cover View Content</cover-view>
    <web-view v-if="isVisible" src="https://example.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

4. 使用 setTimeout 延迟隐藏

在某些情况下，v-if 切换时可能需要一些时间来完全隐藏组件。你可以使用 setTimeout 延迟隐藏操作，确保组件有足够的时间进行渲染和隐藏。

<template>
  <view>
    <cover-view v-if="isVisible">Cover View Content</cover-view>
    <web-view v-if="isVisible" src="https://example.com"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    hideComponents() {
      this.isVisible = false;
      setTimeout(() => {
        // 其他操作
      }, 100); // 延迟 100ms
    }
  }
};
</script>