uni-app 开发 APP 怎么实现底部弹出框选择菜单的效果？

需求描述

使用 uni-app 来开发 APP 界面，有个需求是点击从底部弹出选择框，一般是在移动端需要显示更多菜单，比如下面两种情况：

• 在列表页点击某个列表的更多图标，弹出底部菜单，方便用户选择「编辑」或「删除」等操作；
• 在文章页面，点击显示更多操作选项。

自己造轮子太费劲

这样的需求很常见。如果是自己从零来实现这样的需求，首先需要写一个半透明的遮罩，然后再写一个菜单选项列表，分别给他们加入显示、隐藏的动画，最后封装成组件，等代码写完调试好，估计会掉几百根头发。

层级问题无法解决

如果 APP 是通过 Vue 页面来写界面，层级的问题是无法解决的，比如底部导航菜单就是原生控件，永远无法覆盖在上面。

那怎么实现省事，效果又很不错呢？

通过 uni 交互反馈 API 来实现

在 uni-app 中，关于界面交互反馈的 API 中，有一个名称为 uni.showActionSheet 的用法，帮我们完整地封装好了上面的底部弹框菜单的功能。具体用法如下：

参数说明

参数	类型	必填	说明	平台差异说明
title	String	否	菜单标题	App、H5、支付宝小程序、钉钉小程序、微信小程序专用
alertText	String	否	警示文案（同菜单标题）	微信小程序专用
itemList	Array<String>	是	按钮的文字数组	微信、百度、抖音小程序数组长度最大为6个
itemColor	HexColor	否	按钮的文字颜色，字符串格式，默认为”#000000″	App-iOS、飞书小程序不支持
popover	Object	否	大屏设备弹出原生选择按钮框的指示区域，默认居中显示	App-iPad、H5专用
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

popover 值用法说明

注意这个参数只在 App 端生效。

值	类型	说明
top	Number	指示区域坐标，使用原生 navigationBar 时一般需要加上 navigationBar 的高度
left	Number	指示区域坐标
width	Number	指示区域宽度
height	Number	指示区域高度

success 返回参数说明

参数	类型	说明
tapIndex	Number	用户点击的按钮，从上到下的顺序，从0开始

实现一个底部弹框菜单的代码很简单，只需要几行：

// 呼出底部弹出框
uni.showActionSheet({
  itemList: ['编辑', '移动', '删除'],
  success: function (res) {
    console.log(`选中了第${res.tapIndex + 1}个菜单`);
  },
  fail: function (res) {
    console.log(res.errMsg);
  }
});

总结

这个 API 是全局内置的，无需引用就可以调用，非常方便。而且 uni.showActionSheet 并不是写了一个 Vue 组件，在 APP 端是原生实现的底部弹框菜单，这个控件是原生控件，层级最高，可覆盖 video、map、tabbar 这些原生控件，既省事，又完美解决层级问题。