微信小程序原生的 showActionSheet 虽然能快速拉起底部菜单，但可定制程度较低，无法在面板顶部加入标题、说明文字或更丰富的按钮样式。做一个仿微信底部操作菜单的自定义 modal，通常需要自己维护遮罩、面板、按钮组和动画状态。

一、组件结构设计：拆成遮罩、面板与安全区

自定义底部弹窗最好封装成独立组件，避免每个页面重复维护显示状态。组件内部可以分成三层：最外层是负责拦截点击的遮罩，中间是底部操作面板，面板内部再按业务拆成标题区、按钮列表和取消按钮。遮罩单独放一层的好处是，用户可以点击空白区域关闭弹窗，而不会误触面板上的按钮。

设计 WXML 结构时，遮罩和面板需要平级，不要将面板嵌在遮罩内，否则点击面板时事件容易冒泡到遮罩触发关闭。基础结构如下，使用 catchtouchmove 阻止遮罩下的页面继续滚动。按钮如果由外部传入，可以在组件里定义 actions 数组，通过 wx:for 循环渲染。

<view class="modal-root" wx:if="{{visible}}">
  <view class="modal-mask" catchtap="handleMaskTap" catchtouchmove="preventMove"></view>
  <view class="modal-panel {{show ? 'modal-panel--show' : ''}}">
    <view class="modal-title" wx:if="{{title}}">{{title}}</view>
    <view class="modal-action" wx:for="{{actions}}" wx:key="index"
          data-index="{{index}}" bindtap="handleActionTap"
          class="{{item.disabled ? 'modal-action--disabled' : ''}}">
      <text>{{item.name}}</text>
    </view>
    <view class="modal-cancel" bindtap="handleCancelTap">取消</view>
  </view>
</view>

上面代码中，wx:if 控制组件是否挂载，show 控制上滑动画。这样区分的好处是，打开弹窗时先挂载节点再触发动画，关闭时先播放下落动画再卸载节点，能避免瞬间消失的突兀感。

二、样式实现：层级、圆角与底部安全区

遮罩用 position: fixed 铺满全屏，背景色使用 rgba 而不是固定透明度，这样在深色和浅色内容上都能保证可读性。面板同样使用 fixed 定位在底部，初始状态通过 transform: translateY(100%) 移出屏幕，显示状态回到 translateY(0)，配合 transition 实现上滑效果。

按钮区域要模拟微信的风格，主操作按钮之间用细分割线隔开，取消按钮和主按钮之间保留一段灰色间隔。底部安全区在 iPhone 全面屏上尤其重要，需要使用 env(safe-area-inset-bottom) 给面板底部补白，否则取消按钮可能被系统横条遮挡。

.modal-root {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.modal-panel--show {
  transform: translateY(0);
}
.modal-title {
  padding: 32rpx 32rpx 20rpx;
  text-align: center;
  font-size: 28rpx;
  color: #888888;
}
.modal-action {
  height: 104rpx;
  line-height: 104rpx;
  text-align: center;
  font-size: 32rpx;
  color: #111111;
  border-top: 1rpx solid #eeeeee;
}
.modal-action--disabled {
  color: #bbbbbb;
}
.modal-cancel {
  margin-top: 12rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  color: #111111;
  background: #f7f7f7;
}

这里使用 inset: 0 表示遮罩铺满父容器，能简化书写。面板圆角只设置顶部两个角，更贴近移动端底部弹窗的视觉习惯。如果按钮数量较多，可以给面板设置 max-height 并让按钮区滚动，但普通操作菜单通常不超过六个按钮，保持固定高度即可。

三、交互逻辑：显示、关闭与滚动穿透

组件需要向外暴露 show 和 hide 方法，或者通过 properties 接收 visible 布尔值。内部维护一个 show 动画状态，当父组件把 visible 置为 true 后，延时一帧再切到 show: true，这样 CSS 过渡才能生效。关闭时先切 show: false，等待动画结束再通过事件通知父组件销毁节点。

Component({
  properties: {
    visible: {
      type: Boolean,
      value: false
    },
    title: {
      type: String,
      value: ''
    },
    actions: {
      type: Array,
      value: []
    }
  },
  data: {
    show: false
  },
  observers: {
    visible(newVal) {
      if (newVal) {
        this.setData({ show: true });
      } else {
        this.setData({ show: false });
        setTimeout(() => {
          this.triggerEvent('close');
        }, 240);
      }
    }
  },
  methods: {
    handleMaskTap() {
      this.triggerEvent('cancel');
    },
    handleCancelTap() {
      this.triggerEvent('cancel');
    },
    handleActionTap(e) {
      const { index } = e.currentTarget.dataset;
      const item = this.data.actions[index];
      if (item && item.disabled) return;
      this.triggerEvent('action', { index, item });
    },
    preventMove() {
      return false;
    }
  }
});

点击遮罩和点击取消按钮都触发 cancel 事件，由父页面决定是否关闭。这样做比组件内部直接改 visible 更灵活，例如业务需要在关闭前检查表单状态。主按钮点击则通过 action 事件把当前项和索引传给页面，页面处理完后再关闭弹窗。

滚动穿透是自定义底部弹窗最常见的体验问题。如果遮罩不拦截触摸移动，用户在弹窗打开时滑动背景页面，底层内容会跟着滚动。给遮罩绑 catchtouchmove="preventMove" 能阻止默认滚动行为，但某些安卓机型下还需要在面板区域也加上 catchtouchmove，否则面板内部滚动会受影响。如果面板内容本身需要滚动，应使用 <scroll-view> 并设置 scroll-y，而不是依赖页面滚动。

四、细节优化：返回键、层级冲突与按钮状态

微信小程序基础库从 2.7.0 起支持监听 onPageTap 或页面栈的返回行为，但自定义弹窗不是页面，无法直接监听返回键。较简单的方案是，在页面 onUnload 中重置弹窗状态，避免页面销毁后组件仍然存在。如果产品要求安卓返回键先关闭弹窗，可以考虑在页面生命周期中结合 getCurrentPages 判断当前层级，或使用 wx.enableAlertBeforeUnload 等能力，但实现成本和平台限制都较高。

多弹窗场景下要统一管理 z-index。不要在组件里写死一个极高值，例如 9999，可以给组件增加 zIndex 属性，默认 1000，需要叠加时由父页面传入更高值。按钮的禁用态不仅要改变颜色，还要在 handleActionTap 里做短路判断，否则视觉上禁用但点击仍会触发事件。点按反馈可以利用 hover-class 给按钮加灰色背景，不过面板类组件通常不用微信默认的 hover 效果，而是通过 active 伪类或额外的 catchtouchstart 处理。

最后提醒一个容易忽略的问题：如果页面存在 <textarea>、<input> 等原生组件，弹窗打开前最好让它们失焦，否则原生组件会突破层级浮在弹窗上方。微信原生组件的层级问题在自定义弹窗中非常明显，目前较稳妥的做法是在打开弹窗前调用 wx.hideKeyboard()，并让输入框所在的容器先隐藏或收起。

综合来看，仿微信底部操作菜单的弹窗实现并不复杂，核心在于把显示、遮罩、面板、安全区和事件回调划分清楚。封装成组件后，页面只需维护一个 visible 状态和少量事件处理，后续补充更多按钮或调整样式都更从容。