uni-app 弹框遮挡底部tabbar和导航栏：picker-view、uni.popup、自定义组件详解

picker-view组件可以遮住底部tabbar和导航栏，是因为它是以浮层的形式展示在页面上，覆盖了其他元素。而uni.popup弹框组件不具备覆盖其他元素的能力，所以无法遮住底部tabbar和导航栏。

如果想要实现遮住底部tabbar和导航栏的弹框，可以使用uni-app中的uni-modal组件。uni-modal是一个模态弹窗组件，可以覆盖整个页面，并且可以自定义弹窗的内容和样式。

自定义组件可以通过以下步骤实现：

创建一个自定义组件的文件夹，例如'my-modal'。
在该文件夹下创建一个vue文件，例如'my-modal.vue'，编写弹窗的内容和样式。
在需要使用弹窗的页面中，引入自定义组件，并在页面的template中使用该组件。
在页面中使用data属性来控制弹窗的显示与隐藏。
在需要弹出弹窗的地方，设置data属性来显示弹窗。

具体示例代码如下：

在'my-modal.vue'中编写弹窗的内容和样式：

<template>
  <div class='modal'>
    <div class='modal-content'>
      <!-- 弹窗内容 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'myModal',
  data() {
    return {
      showModal: false // 控制弹窗的显示与隐藏
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); // 半透明背景
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  width: 80%;
  height: 80%;
  border-radius: 8px;
}
</style>

在需要使用弹窗的页面中引入自定义组件，并在template中使用该组件：

<template>
  <div>
    <!-- 页面内容 -->

    <my-modal v-show='showModal'></my-modal>
  </div>
</template>

<script>
import MyModal from '@/components/my-modal'

export default {
  components: {
    MyModal
  },
  data() {
    return {
      showModal: false // 控制弹窗的显示与隐藏
    }
  }
}
</script>

在需要弹出弹窗的地方，设置data属性来显示弹窗：

<template>
  <div>
    <!-- 页面内容 -->

    <button @click='showModal = true'>点击弹窗</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false // 控制弹窗的显示与隐藏
    }
  }
}
</script>

这样就可以通过自定义组件实现遮住底部tabbar和导航栏的弹窗效果了。