弹指之间，全屏弹窗覆盖原生控件导航栏和tabbar，轻松实现全局调用

Android

2023-12-22 10:33:17

在 UniApp 中实现全屏弹窗覆盖原生控件导航栏和 TabBar

背景

在使用 UniApp 开发应用时，在页面中使用弹出窗口或对话框时，可能会遇到遮罩层覆盖页面内容，但无法覆盖原生控件的导航栏和 TabBar 的问题。这会影响弹窗的视觉效果和用户体验。

解决方案

本文将介绍一种简单的方法，实现 UniApp 全屏弹窗覆盖原生控件导航栏和 TabBar，并可在任意页面全局调用。

步骤

1. 创建页面

在 components 或 pages 目录中新建一个页面，用于编写全屏弹窗代码。

2. 在 pages.json 中注册页面

在 pages.json 文件中注册新创建的页面，并设置其样式：

{
  "path": "components/ymt-updateModel/ymt-updateModel",
  "style": {
    "navigationBarBackgroundColor": "#00000000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "",
    "backgroundColor": "#00000000"
  }
}

3. 设置背景色透明及取消导航栏

在 pages.json 中设置新创建页面的样式，将背景色设置为透明 (#00000000) 并取消导航栏 (navigationBarTitleText: "")。

4. 编写全屏弹窗代码

在新建页面中编写全屏弹窗代码，使用 UniApp 提供的 Popup 组件：

<template>
  <popup v-model="show" :mask-close="false" :prevent-scroll="true">
    <div class="popup-content">
      <!-- 全屏弹窗的内容 -->
    </div>
  </popup>
</template>

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

<style>
.popup-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

5. 在其他页面中调用全屏弹窗

在新页面中已完成全屏弹窗的编写，可在其他页面中引用调用：

import ymtUpdateModel from 'components/ymt-updateModel/ymt-updateModel'

export default {
  components: {
    ymtUpdateModel
  },
  methods: {
    openPopup() {
      this.$refs.ymtUpdateModel.open()
    }
  }
}