---

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的高顏值組件庫