uniapp 弹出下面有镂空效果如何实现

在uniapp中如何实现一个底部弹出的模态框，并且这个模态框下方有镂空效果？我尝试过使用uni-popup组件，但不知道如何添加镂空的设计。有没有现成的组件或者CSS方法可以实现这种效果？希望有具体的代码示例或实现思路。

2 回复

使用uni-app实现底部弹出镂空效果，可以通过以下步骤：

  1. 使用uni.showModal或自定义弹窗组件
  2. 设置弹窗背景为半透明遮罩层
  3. 在弹窗内容区域使用CSS实现镂空：
    .mask {
  background: rgba(0,0,0,0.5);
}
.hole {
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 1000px rgba(0,0,0,0.5);
}
  4. 结合position: fixed定位实现底部弹出动画

或者使用第三方UI库如uView的弹出层组件。


在 UniApp 中实现弹出层下方有镂空效果（即底部内容可见），可以通过以下步骤实现：

  1. 使用 uni-popup 组件：这是 UniApp 官方提供的弹窗组件，支持多种弹出方式。
  2. 自定义样式：通过 CSS 设置弹窗背景透明或半透明，并调整内容区域位置，使底部内容可见。

实现代码示例

  1. 安装 uni-popup 组件（如果尚未安装）：

    • 在 HBuilderX 中，右键点击项目 → 选择“使用插件” → 搜索 uni-popup 并安装。

  2. 在页面中使用 uni-popup：

    <template>
  <view>
    <button @click="showPopup">打开弹窗</button>
    <uni-popup ref="popup" type="bottom" :mask-click="false">
      <view class="popup-content">
        <!-- 弹窗内容 -->
        <text>这是弹窗内容，底部区域可看到页面背景</text>
      </view>
    </uni-popup>
  </view>
</template>

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

<style>
.popup-content {
  background: transparent; /* 设置内容背景透明 */
  padding: 20px;
  border-radius: 10px 10px 0 0;
}

/* 调整弹窗遮罩层为透明或半透明 */
.uni-popup__wrapper {
  background-color: rgba(0, 0, 0, 0.3); /* 半透明遮罩 */
}
</style>

关键点说明：

  • type="bottom"：设置弹窗从底部弹出。
  • mask-click="false"：防止点击遮罩层关闭弹窗（可选）。
  • 背景透明：通过 CSS 将 .popup-content 的背景设为 transparent，使底部内容可见。
  • 遮罩层透明度：调整 .uni-popup__wrapper 的 background-color 为 rgba(0,0,0,0.3) 实现半透明效果。

镂空效果增强：

如果需要更复杂的镂空形状（如圆形、矩形镂空），可以使用 CSS mask 属性或 SVG 遮罩，但 UniApp 对高级 CSS 支持有限，建议保持简单设计。

这样即可实现弹窗下方内容可见的镂空效果。

回到顶部