更新记录

1.0.0（2026-09-28） 下载此版本

• 首次发布
• 悬浮球支持拖拽、左右自动吸边
• 点击扇形展开子按钮，个数与图标（emoji/文字/图片）可自定义
• 靠近屏幕上/下边缘自动调整展开方向，子按钮不飞出屏幕
• 闲置数秒主球自动半透明，减少遮挡
• H5 桌面端适配鼠标拖拽，其余端使用 touch 事件
• 兼容 Vue2 / Vue3，支持 H5、微信小程序、App(vue)

平台兼容性

uni-app(3.8.4)

uni-app x(3.8.4)

float-button 可拖拽吸边悬浮球组件

仿 iPhone AssistiveTouch（小圆点）的 uni-app 悬浮球组件：

• 🖱 拖拽 + 吸边：手指拖动自由移动，松手自动吸附左右边缘
• 📖 扇形展开：点击主球弹出子按钮扇形菜单，自动根据吸边方向调整开口，避免飞出屏幕
• 🔧 高自定义：子按钮个数（1~N 任意）、图标支持 emoji / 文字 / 图片路径
• 🌗 闲置淡化：无操作数秒后主球自动半透明（iOS 效果），减少遮挡
• 🧩 全端兼容：纯 view + touch 事件实现，无第三方依赖（H5 桌面端额外适配鼠标拖拽）

平台支持

快速上手

组件符合 easycom 规范，放入 uni_modules 即可直接使用，无需 import：

<template>
    <view>
        <dev-float-button :buttons="buttons" @select="" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                buttons: [
                    { icon: '🏠', iconType: 'text' },
                    { icon: '❤️', iconType: 'text' },
                    { icon: '/static/cart.png', iconType: 'image' }
                ]
            }
        },
        methods: {
            ({ item, index }) {
                console.log('点击了第', index + 1, '个按钮', item)
            }
        }
    }
</script>

示例页：uni_modules/dev-float-button/pages/float-button-demo/float-button-demo，把该路径注册到项目的 pages.json 即可运行体验。

Props

Events

交互说明

• 点击主球：展开 / 收起扇形菜单；点击屏幕任意空白：收起
• 拖拽主球：自由移动，松手吸附最近的一侧边缘；拖拽中自动收起菜单
• 靠近屏幕上/下边缘时，扇形会自动整体向内侧偏移，保证子按钮不飞出屏幕
• 子按钮 iconType: 'image' 时 icon 为图片路径（本地 / 网络图均支持）

License

MIT