小程序内置的底部操作菜单用起来非常轻量，但当产品希望在取消按钮上方增加一段说明文字、给危险操作标红，或者放入一个带动图的会员入口时，原生的 wx.showActionSheet 就很难满足。由于它不支持自定义样式和复杂子元素，越来越多的项目选择自己封装底部弹窗组件。其实实现思路并不复杂，核心是把遮罩层和底部面板拆开，配合过渡动画与事件回调，再处理好安全区和滚动穿透即可。
原生 wx.showActionSheet 的局限与自定义弹窗的定位
使用原生接口时，通常会先想到 wx.showActionSheet，它确实能快速弹出一个底部菜单，但约束也相当明显。这个 API 只接收纯文本数组，不能给每一项添加图标、描述或颜色样式，最多也只能展示六个操作项。比如要做成微信聊天里的长按消息弹窗，顶部带用户昵称，中间带图标菜单，底部红色删除按钮，原生接口完全无法承载。更麻烦的是，取消按钮的文案虽然可以改，但位置和样式固定，部分安卓机型上的层级表现也不一致。
自定义底部弹窗并不是为了替代原生所有场景，而是为了承接复杂交互。把它封装成独立组件后，页面层只需要维护一个 visible 布尔值，弹窗内部的结构、样式和动效全部由组件负责。这样做的好处是同一个菜单组件可以在多个页面复用，危险操作统一定义为红色，扩展区域通过插槽注入，不再需要每个页面重复写一套 WXML 和 WXSS。相比原生 API，自定义组件唯一的代价是要自己处理动画和关闭时机，但这两部分都可以沉淀成固定逻辑，一次封装长期受益。
从交互设计角度看，仿微信底部操作菜单需要抓住几个关键点：遮罩渐显、面板上滑、点击遮罩关闭、取消按钮始终独立在列表末尾、列表项之间有细分隔线、危险操作标红。实现时不必完全照搬微信样式，但视觉节奏要接近，尤其是关闭动画不能生硬。下面从组件结构开始说明。
自定义底部弹窗组件的结构设计
一个底部弹窗组件在 WXML 里至少需要两层：遮罩层和内容面板。遮罩层负责拦截背景点击和显示半透明黑色背景，内容面板放在屏幕底部，用 position: fixed 定位。为了让组件能完整控制显示状态，不要在组件内部直接使用 hidden 切换，而应该用 wx:if 配合 visible 属性。初始渲染时 visible 为 false，弹窗完全不存在；打开时置为 true，面板从底部滑入，关闭时先播放下滑动画，再通知父组件把 visible 切回 false。这样可以避免只隐藏不移除导致的层级残留和动画冲突。
结构上推荐把关闭按钮、菜单内容和插槽分开。面板顶部可以保留一个小横条，模拟微信操作菜单的拖拽感，但微信本身不一定有，这里更多是为了视觉提示。菜单主体使用默认插槽，额外区域使用具名插槽，例如 header 和 footer。这样页面使用组件时可以灵活插入说明文字、头像、图片或自定义按钮。下面是组件的基础 WXML 结构：
<view class="modal-root" wx:if="{{visible}}">
<view class="mask" catchtouchmove="noop" bindtap="handleMaskTap"></view>
<view class="panel {{closing ? 'closing' : ''}}">
<view class="handle"></view>
<view class="modal-content">
<slot name="header"></slot>
<slot></slot>
<slot name="footer"></slot>
</view>
<button class="cancel-btn" bindtap="handleCancel">取消</button>
</view>
</view>
这里需要注意的是 <view> 和 <slot> 都是小程序的基础标签，在组件里由 WXML 引擎解析，不会显示在界面上。面板类名中的 closing 用于控制关闭动画，组件内部先改变这个状态，再延时通知页面。具名插槽需要开启 multipleSlots，否则只有默认插槽生效。
除了结构，组件的 JSON 配置要保持干净，声明为组件即可，不要在组件里引入不必要的页面级配置。如果需要使用多插槽，记得在 Component 的 options 中设置 multipleSlots: true。组件属性方面，至少暴露 visible，而 closing 属于内部状态，不应由父组件直接控制。一个清晰的属性划分能让后续维护少踩很多坑。
动画、遮罩与滚动穿透处理
底部弹窗的质感主要来自动画。如果只是简单地显示和隐藏，用户会感觉像页面跳动，缺少原生菜单那种从底部升起的节奏。我们可以用 CSS @keyframes 实现，打开时面板从 translateY(100%) 过渡到 translateY(0)，遮罩层透明度从 0 过渡到 0.45。关闭时反过来，但这里有一个细节：不能马上把 visible 置为 false，否则元素直接消失，动画播不出来。正确的做法是组件内部先设置 closing: true，等动画结束后再触发 close 事件。
遮罩层点击关闭是最常见的退出路径。为了让用户点击遮罩不会穿透到后面的页面元素，遮罩层要使用 catchtouchmove 来拦截触摸移动。如果弹窗内部有可滚动内容，不能把整个面板都设置 catchtouchmove，否则菜单项多的时候无法滚动。此时应该使用 <scroll-view> 组件单独管理内部滚动，外层面板只处理边缘区域。对于全面屏手机，面板底部还需要加 padding-bottom: env(safe-area-inset-bottom)，否则取消按钮可能被底部横条遮挡。
下面这段样式涵盖了遮罩渐显、面板上滑和 iPhone 底部安全区适配：
.modal-root {
position: fixed;
inset: 0;
z-index: 1000;
}
.mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
animation: mask-in 0.25s ease;
}
.panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding-bottom: env(safe-area-inset-bottom);
transform: translateY(100%);
animation: slide-up 0.28s ease forwards;
}
.panel.closing {
animation: slide-down 0.22s ease forwards;
}
@keyframes mask-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-up {
to { transform: translateY(0); }
}
@keyframes slide-down {
to { transform: translateY(100%); }
}
如果不想使用 CSS 动画，也可以用 wx.createAnimation 在 JS 中控制，但那样代码会更啰嗦，而且不易和 closing 状态联动。建议动画时间控制在 0.2 到 0.3 秒，太快显得仓促，太慢会拖沓。打开动画比关闭动画稍长一点，符合移动端手势习惯。
事件通信与页面复用
组件和页面之间的通信全部通过事件完成，不要尝试在组件内直接修改外部状态。选中菜单项时，组件从 data-value 中取出当前项的值，通过 triggerEvent('select', { value }) 抛给页面；取消和关闭遮罩则通过 close 事件携带来源。页面收到 close 后把 visible 改为 false，组件也就完成了销毁过程。下面是一个基础逻辑示例：
Component({
options: {
multipleSlots: true
},
properties: {
visible: {
type: Boolean,
value: false
}
},
data: {
closing: false
},
methods: {
handleMaskTap() {
this.hideModal('mask');
},
handleCancel() {
this.hideModal('cancel');
},
handleSelect(e) {
const value = e.currentTarget.dataset.value;
this.triggerEvent('select', { value });
this.hideModal('select');
},
hideModal(source) {
if (!this.data.visible) return;
this.setData({ closing: true });
setTimeout(() => {
this.setData({ closing: false });
this.triggerEvent('close', { source });
}, 220);
}
}
});
这里把关闭逻辑集中到 hideModal 方法里，避免每个按钮都写一遍动画和延时。点击遮罩、取消按钮或某个菜单项后，统一调用这个方法，只是事件参数不同。注意 setTimeout 的延时需要和 CSS 关闭动画时长保持一致，否则会出现动画还没播完组件就消失的闪烁。
在页面中使用组件时，既可以先写一个菜单列表数据，用 wx:for 渲染，也可以完全用插槽自定义内容。前者适合标准型菜单，后者适合带复杂说明的场景。页面只需维护 showModal 一个状态，接收 select 和 close 事件即可。这样即使以后产品要求更换菜单顺序、增加红色删除项，也只需要调整页面传入的内容，组件本身不需要改动。
实际使用时还可以给组件增加 showCancel、title 等属性，或者暴露一个 open 方法，但推荐用 visible 单向数据流，更符合小程序的组件设计习惯。不要为了省事把 showModal 直接通过 this.selectComponent 再操作，那样会让状态来源分裂，排查问题时很麻烦。保持组件只负责展示和回传事件，页面负责数据状态，是最稳妥的复用方式。