微信小程序 - 最新详细实现气泡菜单功能，点击任意元素在底部或附近周围弹出气泡菜单列表，仿微信气泡弹框显示菜单快捷功能收纳，自定义气泡弹窗/菜单气泡弹窗，小程序气泡框嵌套菜单组件插件，自动计算弹出定位

前言

如果您需要 uniapp 全端兼容版本，请访问 这篇文章。

在微信小程序开发中，详解实现 “点击按钮/图标/文字/任意html元素时，从底部弹出气泡菜单” 效果，气泡框弹出位置可固定为上下左右或者自动根据周围附近的元素决定（确保不会出现遮挡覆盖无法点击菜单等问题），点击菜单项后气泡自动消失，类似微信App右上角加号+点击展开悬浮菜单功能效果，支持菜单列表内容 slot 插槽自定义任何样式、可在菜单项前方加入图标等操作，气泡弹框带 “小三角指向”，适用于收纳各种功能到某个元素中，快捷功能放到气泡菜单列表中。

小程序 vue2 | vue3 版本语法都能使用，跟着教程复制代码运行稍加改造即可。

---

如下图所示，无论你的触发元素在页面的任何位置，气泡菜单都能精准计算不会遮挡和覆盖。

详细示例代码及注释，uniapp小程序也能用，保证新手小白100%搞定。

示例代码

具体实现代码如下，请直接复制运行测试即可。