更新记录

1.0.1（2025-04-17） 下载此版本

• 修复微信小程序无法自动吸附问题

1.0.0（2025-04-08） 下载此版本

第一版发布

平台兼容性

uni-app

其他

myl-uniapp-fab

一个功能强大的 uniapp 悬浮按钮组件，支持拖拽、自动吸附、多种布局模式等特性。

特性

• 🚀 支持拖拽：按钮可自由拖动到屏幕任意位置
• 🔄 自动吸附：松手后自动吸附到屏幕边缘
• 📱 安全区域：自动避开顶部和底部安全区域
• 🎨 多种布局：支持环形(circle)和列式(column)两种布局模式
• 🎯 自定义菜单：支持自定义菜单项的图标和操作
• 💫 动画效果：流畅的展开/收起动画
• 🎭 插槽支持：支持自定义按钮和菜单项的内容

安装

将 components/fab 文件夹复制到你的项目中的 components 目录下。

使用方法

1. 在页面中引入组件：

import Fab from '@/components/fab/index.vue' export default { components: { Fab
} }

2. 在模板中使用：

<template>
  <fab
    :menuItems="menuItems"
    :layout="'circle'"
    :draggable="true"
    :autosorption="true"
    @select="handleSelect" />
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { icon: "📝", action: "edit" },
        { icon: "🔍", action: "search" },
        { icon: "⭐", action: "star" },
        { icon: "💾", action: "save" },
      ],
    };
  },
  methods: {
    handleSelect(item) {
      console.log("选中的菜单项：", item);
    },
  },
};
</script>

属性说明

事件

插槽

注意事项

1. circle 布局模式下，为避免按钮重叠，建议菜单项不超过 4 个
2. 使用自动吸附功能时，按钮会自动吸附到最近的屏幕边缘
3. 可以通过 safeDistance、bottomSafeDistance 和 topSafeDistance 属性调整按钮的安全区域

示例

查看 pages/example 目录下的示例文件，了解更多使用方法：

• circle.vue: 环形布局示例
• column.vue: 列式布局示例

License

MIT