当前位置：首页 > uni-app

uniapp下拉遮罩层

2026-03-05 16:27:00uni-app

实现下拉遮罩层的几种方法

方法一：使用<view>和CSS动画 通过绝对定位和透明度变化实现遮罩层下拉效果。在template中添加遮罩层结构和触发按钮：

<template>
  <view>
    <button @click="toggleMask">显示遮罩层</button>
    <view class="mask" v-show="showMask" @click="toggleMask"></view>
    <view class="content" :class="{ 'show': showMask }">
      <!-- 遮罩层内容 -->
    </view>
  </view>
</template>

CSS样式部分需设置过渡动画：

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 998;
  opacity: 0;
  transition: opacity 0.3s;
}

.content {
  position: fixed;
  bottom: -100%;
  width: 100%;
  z-index: 999;
  transition: all 0.3s;
}

.content.show {
  bottom: 0;
}

.mask.show {
  opacity: 1;
}

JavaScript控制显示状态：

export default {
  data() {
    return {
      showMask: false
    }
  },
  methods: {
    toggleMask() {
      this.showMask = !this.showMask
    }
  }
}

方法二：使用uni-app原生组件 利用uni-popup组件快速实现遮罩效果。安装组件后直接调用：

<uni-popup ref="popup" type="bottom">
  <view>下拉内容</view>
</uni-popup>
<button @click="openPopup">打开遮罩</button>

脚本部分控制弹出：

methods: {
  openPopup() {
    this.$refs.popup.open()
  }
}

方法三：自定义动画组件 创建更复杂的交互动画，通过transform和transition组合实现弹性效果：

.content {
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.content.show {
  transform: translateY(0);
}

注意事项

uniapp下拉遮罩层