首页 APP开发 正文内容

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

2023年08月30日 , , 429

本文说明如何用 uni-app 自带的 api 来实现从底部向上弹出操作菜单的功能。

需求描述

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

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

自己造轮子太费劲

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

底部弹框菜单
底部弹框菜单

层级问题无法解决

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

那怎么实现省事,效果又很不错呢?

通过 uni 交互反馈 API 来实现

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

参数说明

参数类型必填说明平台差异说明
titleString菜单标题App、H5、支付宝小程序、钉钉小程序、微信小程序专用
alertTextString警示文案(同菜单标题)微信小程序专用
itemListArray<String>按钮的文字数组微信、百度、抖音小程序数组长度最大为6个
itemColorHexColor按钮的文字颜色,字符串格式,默认为”#000000″App-iOS、飞书小程序不支持
popoverObject大屏设备弹出原生选择按钮框的指示区域,默认居中显示App-iPad、H5专用
successFunction接口调用成功的回调函数,详见返回参数说明
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)
uni.showActionSheet 参数表

popover 值用法说明

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

类型说明
topNumber指示区域坐标,使用原生 navigationBar 时一般需要加上 navigationBar 的高度
leftNumber指示区域坐标
widthNumber指示区域宽度
heightNumber指示区域高度
popover 参数说明表

success 返回参数说明

参数类型说明
tapIndexNumber用户点击的按钮,从上到下的顺序,从0开始
success 返回参数表

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

// 呼出底部弹出框
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 这些原生控件,既省事,又完美解决层级问题