uniapp，uni-fab组件拖动属性，替代方案

---

1. 背景

最近基于uniapp开发一款设备参数调试的APP软件，其中有使用到悬浮按钮，快速开发阶段，为了能尽快上线，直接使用了uni-ui的扩展组件uni-fab，参考【1】，效果如下图：

后期，相应的界面内容增多，由于uni-fab是不可移动的，会遮挡页面内容，该组件属性中不带可移动属性，所以考虑替代方案，查了一下，有两种方案，一种是字节开发一个组件，另一种是使用第三方开源组件。本文主要记录第二种方案的使用细节。

---

2. 替代方案

2.1 方案一

参考【2】、【3】，自己编码实现，因为博主已经用了uni-fab，悬浮按钮中子按钮和逻辑已经写好，不想大改，故放弃了该方案，感兴趣的小伙伴可以尝试一下。

---

2.2 方案二

参考【4】，使用第三方免费插件，完美替代uni-fab。

使用该组件分两步：
第一步：将Wot Design Uni组件导入自己的工程
参考【5】

---

导入成功后，在本地工程中可以看到：

第一步：直接使用
参考【4】中的示例代码

---

参考

【1】uni-fab
【2】使用uniapp实现全局悬浮按钮(可拖动)
【3】uniapp一篇教你怎么写悬浮窗可拖动
【4】Fab 悬浮按钮
【5】wot-design-uni 基于vue3+Typescript的高颜值组件库